home *** CD-ROM | disk | FTP | other *** search
/ PC go! 2018 July / PCgo 07-2018 CD-ROM Germany.iso / nw.pak / Unnamed File 004764.unknown < prev    next >
Encoding:
Text File  |  2015-07-29  |  274.0 KB  |  1,866 lines

  1. WebInspector.Spectrum=function()
  2. {WebInspector.VBox.call(this,true);this.registerRequiredCSS("elements/spectrum.css");this.contentElement.tabIndex=0;this._draggerElement=this.contentElement.createChild("div","spectrum-color");this._dragHelperElement=this._draggerElement.createChild("div","spectrum-sat fill").createChild("div","spectrum-val fill").createChild("div","spectrum-dragger");this._sliderElement=this.contentElement.createChild("div","spectrum-hue");this.slideHelper=this._sliderElement.createChild("div","spectrum-slider");var rangeContainer=this.contentElement.createChild("div","spectrum-range-container");var alphaLabel=rangeContainer.createChild("label");alphaLabel.textContent=WebInspector.UIString("\u03B1:");this._alphaElement=rangeContainer.createChild("input","spectrum-range");this._alphaElement.setAttribute("type","range");this._alphaElement.setAttribute("min","0");this._alphaElement.setAttribute("max","100");this._alphaElement.addEventListener("input",alphaDrag.bind(this),false);this._alphaElement.addEventListener("change",alphaDrag.bind(this),false);var displayContainer=this.contentElement.createChild("div","spectrum-text");var swatchElement=displayContainer.createChild("span","swatch");this._swatchInnerElement=swatchElement.createChild("span","swatch-inner");this._displayElement=displayContainer.createChild("span","source-code spectrum-display-value");WebInspector.Spectrum.draggable(this._sliderElement,hueDrag.bind(this));WebInspector.Spectrum.draggable(this._draggerElement,colorDrag.bind(this),colorDragStart.bind(this));function hueDrag(element,dragX,dragY)
  3. {this._hsv[0]=(this.slideHeight-dragY)/this.slideHeight;this._onchange();}
  4. var initialHelperOffset;function colorDragStart()
  5. {initialHelperOffset={x:this._dragHelperElement.offsetLeft,y:this._dragHelperElement.offsetTop};}
  6. function colorDrag(element,dragX,dragY,event)
  7. {if(event.shiftKey){if(Math.abs(dragX-initialHelperOffset.x)>=Math.abs(dragY-initialHelperOffset.y))
  8. dragY=initialHelperOffset.y;else
  9. dragX=initialHelperOffset.x;}
  10. this._hsv[1]=dragX/this.dragWidth;this._hsv[2]=(this.dragHeight-dragY)/this.dragHeight;this._onchange();}
  11. function alphaDrag()
  12. {this._hsv[3]=this._alphaElement.value/100;this._onchange();}};WebInspector.Spectrum.Events={ColorChanged:"ColorChanged"};WebInspector.Spectrum.draggable=function(element,onmove,onstart,onstop){var dragging;var offset;var scrollOffset;var maxHeight;var maxWidth;function consume(e)
  13. {e.consume(true);}
  14. function move(e)
  15. {if(dragging){var dragX=Math.max(0,Math.min(e.pageX-offset.left+scrollOffset.left,maxWidth));var dragY=Math.max(0,Math.min(e.pageY-offset.top+scrollOffset.top,maxHeight));if(onmove)
  16. onmove(element,dragX,dragY,(e));}}
  17. function start(e)
  18. {var mouseEvent=(e);var rightClick=mouseEvent.which?(mouseEvent.which===3):(mouseEvent.button===2);if(!rightClick&&!dragging){if(onstart)
  19. onstart(element,mouseEvent);dragging=true;maxHeight=element.clientHeight;maxWidth=element.clientWidth;scrollOffset=element.scrollOffset();offset=element.totalOffset();element.ownerDocument.addEventListener("selectstart",consume,false);element.ownerDocument.addEventListener("dragstart",consume,false);element.ownerDocument.addEventListener("mousemove",move,false);element.ownerDocument.addEventListener("mouseup",stop,false);move(mouseEvent);consume(mouseEvent);}}
  20. function stop(e)
  21. {if(dragging){element.ownerDocument.removeEventListener("selectstart",consume,false);element.ownerDocument.removeEventListener("dragstart",consume,false);element.ownerDocument.removeEventListener("mousemove",move,false);element.ownerDocument.removeEventListener("mouseup",stop,false);if(onstop)
  22. onstop(element,(e));}
  23. dragging=false;}
  24. element.addEventListener("mousedown",start,false);};WebInspector.Spectrum.prototype={setColor:function(color)
  25. {this._hsv=color.hsva();},color:function()
  26. {return WebInspector.Color.fromHSVA(this._hsv);},_colorString:function()
  27. {var cf=WebInspector.Color.Format;var format=this._originalFormat;var color=this.color();var originalFormatString=color.asString(this._originalFormat);if(originalFormatString)
  28. return originalFormatString;if(color.hasAlpha()){if(format===cf.HSLA||format===cf.HSL)
  29. return color.asString(cf.HSLA);else
  30. return color.asString(cf.RGBA);}
  31. if(format===cf.ShortHEX)
  32. return color.asString(cf.HEX);console.assert(format===cf.Nickname);return color.asString(cf.RGB);},set displayText(text)
  33. {this._displayElement.textContent=text;},_onchange:function()
  34. {this._updateUI();this.dispatchEventToListeners(WebInspector.Spectrum.Events.ColorChanged,this._colorString());},_updateHelperLocations:function()
  35. {var h=this._hsv[0];var s=this._hsv[1];var v=this._hsv[2];var dragX=s*this.dragWidth;var dragY=this.dragHeight-(v*this.dragHeight);dragX=Math.max(-this._dragHelperElementHeight,Math.min(this.dragWidth-this._dragHelperElementHeight,dragX-this._dragHelperElementHeight));dragY=Math.max(-this._dragHelperElementHeight,Math.min(this.dragHeight-this._dragHelperElementHeight,dragY-this._dragHelperElementHeight));this._dragHelperElement.positionAt(dragX,dragY);var slideY=this.slideHeight-((h*this.slideHeight)+this.slideHelperHeight);this.slideHelper.style.top=slideY+"px";this._alphaElement.value=this._hsv[3]*100;},_updateUI:function()
  36. {this._updateHelperLocations();this._draggerElement.style.backgroundColor=(WebInspector.Color.fromHSVA([this._hsv[0],1,1,1]).asString(WebInspector.Color.Format.RGB));this._swatchInnerElement.style.backgroundColor=(this.color().asString(WebInspector.Color.Format.RGBA));this._alphaElement.value=this._hsv[3]*100;},wasShown:function()
  37. {this.slideHeight=this._sliderElement.offsetHeight;this.dragWidth=this._draggerElement.offsetWidth;this.dragHeight=this._draggerElement.offsetHeight;this._dragHelperElementHeight=this._dragHelperElement.offsetHeight/2;this.slideHelperHeight=this.slideHelper.offsetHeight/2;this._updateUI();},__proto__:WebInspector.VBox.prototype}
  38. WebInspector.SpectrumPopupHelper=function()
  39. {this._spectrum=new WebInspector.Spectrum();this._spectrum.contentElement.addEventListener("keydown",this._onKeyDown.bind(this),false);this._popover=new WebInspector.Popover();this._popover.setCanShrink(false);this._popover.element.addEventListener("mousedown",consumeEvent,false);this._hideProxy=this.hide.bind(this,true);}
  40. WebInspector.SpectrumPopupHelper.Events={Hidden:"Hidden"};WebInspector.SpectrumPopupHelper.prototype={spectrum:function()
  41. {return this._spectrum;},toggle:function(element,color,format)
  42. {if(this._popover.isShowing())
  43. this.hide(true);else
  44. this.show(element,color,format);return this._popover.isShowing();},show:function(element,color,format)
  45. {if(this._popover.isShowing()){if(this._anchorElement===element)
  46. return false;this.hide(true);}
  47. delete this._isHidden;this._anchorElement=element;this._spectrum.setColor(color);this._spectrum._originalFormat=format!==WebInspector.Color.Format.Original?format:color.format();this.reposition(element);var document=this._popover.element.ownerDocument;document.addEventListener("mousedown",this._hideProxy,false);document.defaultView.addEventListener("resize",this._hideProxy,false);WebInspector.targetManager.addModelListener(WebInspector.ResourceTreeModel,WebInspector.ResourceTreeModel.EventTypes.ColorPicked,this._colorPicked,this);PageAgent.setColorPickerEnabled(true);return true;},reposition:function(element)
  48. {if(!this._previousFocusElement)
  49. this._previousFocusElement=WebInspector.currentFocusElement();this._popover.showView(this._spectrum,element);WebInspector.setCurrentFocusElement(this._spectrum.contentElement);},hide:function(commitEdit)
  50. {if(this._isHidden)
  51. return;var document=this._popover.element.ownerDocument;this._isHidden=true;this._popover.hide();document.removeEventListener("mousedown",this._hideProxy,false);document.defaultView.removeEventListener("resize",this._hideProxy,false);PageAgent.setColorPickerEnabled(false);WebInspector.targetManager.removeModelListener(WebInspector.ResourceTreeModel,WebInspector.ResourceTreeModel.EventTypes.ColorPicked,this._colorPicked,this);this.dispatchEventToListeners(WebInspector.SpectrumPopupHelper.Events.Hidden,!!commitEdit);WebInspector.setCurrentFocusElement(this._previousFocusElement);delete this._previousFocusElement;delete this._anchorElement;},_onKeyDown:function(event)
  52. {if(event.keyIdentifier==="Enter"){this.hide(true);event.consume(true);return;}
  53. if(event.keyIdentifier==="U+001B"){this.hide(false);event.consume(true);}},_colorPicked:function(event)
  54. {var color=(event.data);var rgba=[color.r,color.g,color.b,(color.a/2.55|0)/100];this._spectrum.setColor(WebInspector.Color.fromRGBA(rgba));this._spectrum._onchange();InspectorFrontendHost.bringToFront();},__proto__:WebInspector.Object.prototype}
  55. WebInspector.ColorSwatch=function(readOnly)
  56. {this.element=createElementWithClass("span","swatch");this._swatchInnerElement=this.element.createChild("span","swatch-inner");var shiftClickMessage=WebInspector.UIString("Shift-click to change color format.");this.element.title=readOnly?shiftClickMessage:String.sprintf("%s\n%s",WebInspector.UIString("Click to open a colorpicker."),shiftClickMessage);this.element.addEventListener("mousedown",consumeEvent,false);this.element.addEventListener("dblclick",consumeEvent,false);}
  57. WebInspector.ColorSwatch.prototype={setColorString:function(colorString)
  58. {this._swatchInnerElement.style.backgroundColor=colorString;}};WebInspector.ElementsBreadcrumbs=function()
  59. {WebInspector.HBox.call(this,true);this.registerRequiredCSS("elements/breadcrumbs.css");this.crumbsElement=this.contentElement.createChild("div","crumbs");this.crumbsElement.addEventListener("mousemove",this._mouseMovedInCrumbs.bind(this),false);this.crumbsElement.addEventListener("mouseleave",this._mouseMovedOutOfCrumbs.bind(this),false);}
  60. WebInspector.ElementsBreadcrumbs.Events={NodeSelected:"NodeSelected"}
  61. WebInspector.ElementsBreadcrumbs.prototype={wasShown:function()
  62. {this.update();},updateNodes:function(nodes)
  63. {if(!nodes.length)
  64. return;var crumbs=this.crumbsElement;for(var crumb=crumbs.firstChild;crumb;crumb=crumb.nextSibling){if(nodes.indexOf(crumb.representedObject)!==-1){this.update(true);return;}}},setSelectedNode:function(node)
  65. {this._currentDOMNode=node;this.update();},_mouseMovedInCrumbs:function(event)
  66. {var nodeUnderMouse=event.target;var crumbElement=nodeUnderMouse.enclosingNodeOrSelfWithClass("crumb");var node=(crumbElement?crumbElement.representedObject:null);if(node)
  67. node.highlight();},_mouseMovedOutOfCrumbs:function(event)
  68. {if(this._currentDOMNode)
  69. this._currentDOMNode.domModel().hideDOMNodeHighlight();},update:function(force)
  70. {if(!this.isShowing())
  71. return;var currentDOMNode=this._currentDOMNode;var crumbs=this.crumbsElement;var handled=false;var crumb=crumbs.firstChild;while(crumb){if(crumb.representedObject===currentDOMNode){crumb.classList.add("selected");handled=true;}else{crumb.classList.remove("selected");}
  72. crumb=crumb.nextSibling;}
  73. if(handled&&!force){this.updateSizes();return;}
  74. crumbs.removeChildren();var panel=this;function selectCrumb(event)
  75. {event.preventDefault();var crumb=(event.currentTarget);if(!crumb.classList.contains("collapsed")){this.dispatchEventToListeners(WebInspector.ElementsBreadcrumbs.Events.NodeSelected,crumb.representedObject);return;}
  76. if(crumb===panel.crumbsElement.firstChild){var currentCrumb=crumb;while(currentCrumb){var hidden=currentCrumb.classList.contains("hidden");var collapsed=currentCrumb.classList.contains("collapsed");if(!hidden&&!collapsed)
  77. break;crumb=currentCrumb;currentCrumb=currentCrumb.nextSiblingElement;}}
  78. this.updateSizes(crumb);}
  79. var boundSelectCrumb=selectCrumb.bind(this);for(var current=currentDOMNode;current;current=current.parentNode){if(current.nodeType()===Node.DOCUMENT_NODE)
  80. continue;crumb=createElementWithClass("span","crumb");crumb.representedObject=current;crumb.addEventListener("mousedown",boundSelectCrumb,false);var crumbTitle="";switch(current.nodeType()){case Node.ELEMENT_NODE:if(current.pseudoType())
  81. crumbTitle="::"+current.pseudoType();else
  82. WebInspector.DOMPresentationUtils.decorateNodeLabel(current,crumb);break;case Node.TEXT_NODE:crumbTitle=WebInspector.UIString("(text)");break;case Node.COMMENT_NODE:crumbTitle="<!-->";break;case Node.DOCUMENT_TYPE_NODE:crumbTitle="<!DOCTYPE>";break;case Node.DOCUMENT_FRAGMENT_NODE:crumbTitle=current.shadowRootType()?"#shadow-root":current.nodeNameInCorrectCase();break;default:crumbTitle=current.nodeNameInCorrectCase();}
  83. if(!crumb.childNodes.length){var nameElement=createElement("span");nameElement.textContent=crumbTitle;crumb.appendChild(nameElement);crumb.title=crumbTitle;}
  84. if(current===currentDOMNode)
  85. crumb.classList.add("selected");crumbs.insertBefore(crumb,crumbs.firstChild);}
  86. this.updateSizes();},updateSizes:function(focusedCrumb)
  87. {if(!this.isShowing())
  88. return;var crumbs=this.crumbsElement;if(!crumbs.firstChild)
  89. return;var selectedIndex=0;var focusedIndex=0;var selectedCrumb;for(var i=0;i<crumbs.childNodes.length;++i){var crumb=crumbs.childNodes[i];if(!selectedCrumb&&crumb.classList.contains("selected")){selectedCrumb=crumb;selectedIndex=i;}
  90. if(crumb===focusedCrumb)
  91. focusedIndex=i;crumb.classList.remove("compact","collapsed","hidden");}
  92. var contentElementWidth=this.contentElement.offsetWidth;var normalSizes=[];for(var i=0;i<crumbs.childNodes.length;++i){var crumb=crumbs.childNodes[i];normalSizes[i]=crumb.offsetWidth;}
  93. var compactSizes=[];for(var i=0;i<crumbs.childNodes.length;++i){var crumb=crumbs.childNodes[i];crumb.classList.add("compact");}
  94. for(var i=0;i<crumbs.childNodes.length;++i){var crumb=crumbs.childNodes[i];compactSizes[i]=crumb.offsetWidth;}
  95. crumbs.firstChild.classList.add("collapsed");var collapsedSize=crumbs.firstChild.offsetWidth;for(var i=0;i<crumbs.childNodes.length;++i){var crumb=crumbs.childNodes[i];crumb.classList.remove("compact","collapsed");}
  96. function crumbsAreSmallerThanContainer()
  97. {var totalSize=0;for(var i=0;i<crumbs.childNodes.length;++i){var crumb=crumbs.childNodes[i];if(crumb.classList.contains("hidden"))
  98. continue;if(crumb.classList.contains("collapsed")){totalSize+=collapsedSize;continue;}
  99. totalSize+=crumb.classList.contains("compact")?compactSizes[i]:normalSizes[i];}
  100. const rightPadding=10;return totalSize+rightPadding<contentElementWidth;}
  101. if(crumbsAreSmallerThanContainer())
  102. return;var BothSides=0;var AncestorSide=-1;var ChildSide=1;function makeCrumbsSmaller(shrinkingFunction,direction)
  103. {var significantCrumb=focusedCrumb||selectedCrumb;var significantIndex=significantCrumb===selectedCrumb?selectedIndex:focusedIndex;function shrinkCrumbAtIndex(index)
  104. {var shrinkCrumb=crumbs.childNodes[index];if(shrinkCrumb&&shrinkCrumb!==significantCrumb)
  105. shrinkingFunction(shrinkCrumb);if(crumbsAreSmallerThanContainer())
  106. return true;return false;}
  107. if(direction){var index=(direction>0?0:crumbs.childNodes.length-1);while(index!==significantIndex){if(shrinkCrumbAtIndex(index))
  108. return true;index+=(direction>0?1:-1);}}else{var startIndex=0;var endIndex=crumbs.childNodes.length-1;while(startIndex!=significantIndex||endIndex!=significantIndex){var startDistance=significantIndex-startIndex;var endDistance=endIndex-significantIndex;if(startDistance>=endDistance)
  109. var index=startIndex++;else
  110. var index=endIndex--;if(shrinkCrumbAtIndex(index))
  111. return true;}}
  112. return false;}
  113. function coalesceCollapsedCrumbs()
  114. {var crumb=crumbs.firstChild;var collapsedRun=false;var newStartNeeded=false;var newEndNeeded=false;while(crumb){var hidden=crumb.classList.contains("hidden");if(!hidden){var collapsed=crumb.classList.contains("collapsed");if(collapsedRun&&collapsed){crumb.classList.add("hidden");crumb.classList.remove("compact");crumb.classList.remove("collapsed");if(crumb.classList.contains("start")){crumb.classList.remove("start");newStartNeeded=true;}
  115. if(crumb.classList.contains("end")){crumb.classList.remove("end");newEndNeeded=true;}
  116. continue;}
  117. collapsedRun=collapsed;if(newEndNeeded){newEndNeeded=false;crumb.classList.add("end");}}else{collapsedRun=true;}
  118. crumb=crumb.nextSibling;}
  119. if(newStartNeeded){crumb=crumbs.lastChild;while(crumb){if(!crumb.classList.contains("hidden")){crumb.classList.add("start");break;}
  120. crumb=crumb.previousSibling;}}}
  121. function compact(crumb)
  122. {if(crumb.classList.contains("hidden"))
  123. return;crumb.classList.add("compact");}
  124. function collapse(crumb,dontCoalesce)
  125. {if(crumb.classList.contains("hidden"))
  126. return;crumb.classList.add("collapsed");crumb.classList.remove("compact");if(!dontCoalesce)
  127. coalesceCollapsedCrumbs();}
  128. if(!focusedCrumb){if(makeCrumbsSmaller(compact,ChildSide))
  129. return;if(makeCrumbsSmaller(collapse,ChildSide))
  130. return;}
  131. if(makeCrumbsSmaller(compact,focusedCrumb?BothSides:AncestorSide))
  132. return;if(makeCrumbsSmaller(collapse,focusedCrumb?BothSides:AncestorSide))
  133. return;if(!selectedCrumb)
  134. return;compact(selectedCrumb);if(crumbsAreSmallerThanContainer())
  135. return;collapse(selectedCrumb,true);},__proto__:WebInspector.HBox.prototype};WebInspector.ElementsSidebarPane=function(title)
  136. {WebInspector.SidebarPane.call(this,title);this._updateThrottler=new WebInspector.Throttler(100);this._node=null;}
  137. WebInspector.ElementsSidebarPane.prototype={node:function()
  138. {return this._node;},setNode:function(node)
  139. {this._node=node;this.update();},doUpdate:function(finishedCallback)
  140. {finishedCallback();},update:function()
  141. {this._updateWhenVisible=!this.isShowing();if(this._updateWhenVisible)
  142. return;this._updateThrottler.schedule(innerUpdate.bind(this));function innerUpdate(finishedCallback)
  143. {if(this.isShowing())
  144. this.doUpdate(finishedCallback);else
  145. finishedCallback();}},wasShown:function()
  146. {WebInspector.SidebarPane.prototype.wasShown.call(this);this.update();},__proto__:WebInspector.SidebarPane.prototype};WebInspector.ElementsTreeElement=function(node,elementCloseTag)
  147. {TreeElement.call(this,"",node);this._node=node;this._elementCloseTag=elementCloseTag;if(this._node.nodeType()==Node.ELEMENT_NODE&&!elementCloseTag)
  148. this._canAddAttributes=true;this._searchQuery=null;this._expandedChildrenLimit=WebInspector.ElementsTreeElement.InitialChildrenLimit;}
  149. WebInspector.ElementsTreeElement.InitialChildrenLimit=500;WebInspector.ElementsTreeElement.ForbiddenClosingTagElements=["area","base","basefont","br","canvas","col","command","embed","frame","hr","img","input","keygen","link","menuitem","meta","param","source","track","wbr"].keySet();WebInspector.ElementsTreeElement.EditTagBlacklist=["html","head","body"].keySet();WebInspector.ElementsTreeElement.ChildrenDisplayMode={NoChildren:0,InlineText:1,HasChildren:2}
  150. WebInspector.ElementsTreeElement.animateOnDOMUpdate=function(treeElement)
  151. {var tagName=treeElement.listItemElement.querySelector(".webkit-html-tag-name");WebInspector.runCSSAnimationOnce(tagName||treeElement.listItemElement,"dom-update-highlight");}
  152. WebInspector.ElementsTreeElement.prototype={isClosingTag:function()
  153. {return!!this._elementCloseTag;},node:function()
  154. {return this._node;},isEditing:function()
  155. {return!!this._editing;},highlightSearchResults:function(searchQuery)
  156. {if(this._searchQuery!==searchQuery)
  157. this._hideSearchHighlight();this._searchQuery=searchQuery;this._searchHighlightsVisible=true;this.updateTitle(true);},hideSearchHighlights:function()
  158. {delete this._searchHighlightsVisible;this._hideSearchHighlight();},_hideSearchHighlight:function()
  159. {if(!this._highlightResult)
  160. return;function updateEntryHide(entry)
  161. {switch(entry.type){case"added":entry.node.remove();break;case"changed":entry.node.textContent=entry.oldText;break;}}
  162. for(var i=(this._highlightResult.length-1);i>=0;--i)
  163. updateEntryHide(this._highlightResult[i]);delete this._highlightResult;},setInClipboard:function(inClipboard)
  164. {if(this._inClipboard===inClipboard)
  165. return;this._inClipboard=inClipboard;this.listItemElement.classList.toggle("in-clipboard",inClipboard);},get hovered()
  166. {return this._hovered;},set hovered(x)
  167. {if(this._hovered===x)
  168. return;this._hovered=x;if(this.listItemElement){if(x){this.updateSelection();this.listItemElement.classList.add("hovered");}else{this.listItemElement.classList.remove("hovered");}}},expandedChildrenLimit:function()
  169. {return this._expandedChildrenLimit;},setExpandedChildrenLimit:function(expandedChildrenLimit)
  170. {this._expandedChildrenLimit=expandedChildrenLimit;},childrenDisplayMode:function()
  171. {return this._childrenDisplayMode;},setChildrenDisplayMode:function(displayMode)
  172. {this._childrenDisplayMode=displayMode;},updateSelection:function()
  173. {var listItemElement=this.listItemElement;if(!listItemElement)
  174. return;if(!this._readyToUpdateSelection){if(listItemElement.ownerDocument.body.offsetWidth>0)
  175. this._readyToUpdateSelection=true;else{return;}}
  176. if(!this.selectionElement){this.selectionElement=createElement("div");this.selectionElement.className="selection selected";listItemElement.insertBefore(this.selectionElement,listItemElement.firstChild);}
  177. this.selectionElement.style.height=listItemElement.offsetHeight+"px";},onattach:function()
  178. {if(this._hovered){this.updateSelection();this.listItemElement.classList.add("hovered");}
  179. this.updateTitle();this._preventFollowingLinksOnDoubleClick();this.listItemElement.draggable=true;},_preventFollowingLinksOnDoubleClick:function()
  180. {var links=this.listItemElement.querySelectorAll("li .webkit-html-tag > .webkit-html-attribute > .webkit-html-external-link, li .webkit-html-tag > .webkit-html-attribute > .webkit-html-resource-link");if(!links)
  181. return;for(var i=0;i<links.length;++i)
  182. links[i].preventFollowOnDoubleClick=true;},onpopulate:function()
  183. {this.populated=true;this.treeOutline.populateTreeElement(this);},setUpdateInfo:function(updateInfo)
  184. {this._updateInfo=updateInfo;},expandRecursively:function()
  185. {function callback()
  186. {TreeElement.prototype.expandRecursively.call(this,Number.MAX_VALUE);}
  187. this._node.getSubtree(-1,callback.bind(this));},onexpand:function()
  188. {if(this._elementCloseTag)
  189. return;this.updateTitle();this.treeOutline.updateSelection();},oncollapse:function()
  190. {if(this._elementCloseTag)
  191. return;this.updateTitle();this.treeOutline.updateSelection();},onreveal:function()
  192. {if(this.listItemElement){var tagSpans=this.listItemElement.getElementsByClassName("webkit-html-tag-name");if(tagSpans.length)
  193. tagSpans[0].scrollIntoViewIfNeeded(true);else
  194. this.listItemElement.scrollIntoViewIfNeeded(true);}},select:function(omitFocus,selectedByUser)
  195. {if(this._editing)
  196. return false;if(this.treeOutline.handlePickNode(this.title,this._node))
  197. return true;return TreeElement.prototype.select.call(this,omitFocus,selectedByUser);},onselect:function(selectedByUser)
  198. {this.treeOutline.suppressRevealAndSelect=true;this.treeOutline.selectDOMNode(this._node,selectedByUser);if(selectedByUser)
  199. this._node.highlight();this.updateSelection();this.treeOutline.suppressRevealAndSelect=false;return true;},ondelete:function()
  200. {var startTagTreeElement=this.treeOutline.findTreeElement(this._node);startTagTreeElement?startTagTreeElement.remove():this.remove();return true;},onenter:function()
  201. {if(this._editing)
  202. return false;this._startEditing();return true;},selectOnMouseDown:function(event)
  203. {TreeElement.prototype.selectOnMouseDown.call(this,event);if(this._editing)
  204. return;if(event.detail>=2)
  205. event.preventDefault();},ondblclick:function(event)
  206. {if(this._editing||this._elementCloseTag)
  207. return false;if(this._startEditingTarget((event.target)))
  208. return false;if(this.hasChildren&&!this.expanded)
  209. this.expand();return false;},hasEditableNode:function()
  210. {return!this._node.isShadowRoot()&&!this._node.ancestorUserAgentShadowRoot();},_insertInLastAttributePosition:function(tag,node)
  211. {if(tag.getElementsByClassName("webkit-html-attribute").length>0)
  212. tag.insertBefore(node,tag.lastChild);else{var nodeName=tag.textContent.match(/^<(.*?)>$/)[1];tag.textContent='';tag.createTextChild('<'+nodeName);tag.appendChild(node);tag.createTextChild('>');}
  213. this.updateSelection();},_startEditingTarget:function(eventTarget)
  214. {if(this.treeOutline.selectedDOMNode()!=this._node)
  215. return false;if(this._node.nodeType()!=Node.ELEMENT_NODE&&this._node.nodeType()!=Node.TEXT_NODE)
  216. return false;if(this.treeOutline.pickNodeMode())
  217. return false;var textNode=eventTarget.enclosingNodeOrSelfWithClass("webkit-html-text-node");if(textNode)
  218. return this._startEditingTextNode(textNode);var attribute=eventTarget.enclosingNodeOrSelfWithClass("webkit-html-attribute");if(attribute)
  219. return this._startEditingAttribute(attribute,eventTarget);var tagName=eventTarget.enclosingNodeOrSelfWithClass("webkit-html-tag-name");if(tagName)
  220. return this._startEditingTagName(tagName);var newAttribute=eventTarget.enclosingNodeOrSelfWithClass("add-attribute");if(newAttribute)
  221. return this._addNewAttribute();return false;},populateTagContextMenu:function(contextMenu,event)
  222. {var treeElement=this._elementCloseTag?this.treeOutline.findTreeElement(this._node):this;contextMenu.appendItem(WebInspector.UIString.capitalize("Add ^attribute"),treeElement._addNewAttribute.bind(treeElement));var attribute=event.target.enclosingNodeOrSelfWithClass("webkit-html-attribute");var newAttribute=event.target.enclosingNodeOrSelfWithClass("add-attribute");if(attribute&&!newAttribute)
  223. contextMenu.appendItem(WebInspector.UIString.capitalize("Edit ^attribute"),this._startEditingAttribute.bind(this,attribute,event.target));contextMenu.appendSeparator();if(this.treeOutline.setPseudoClassCallback){var pseudoSubMenu=contextMenu.appendSubMenuItem(WebInspector.UIString.capitalize("Force ^element ^state"));this._populateForcedPseudoStateItems(pseudoSubMenu);contextMenu.appendSeparator();}
  224. this.populateNodeContextMenu(contextMenu);this.populateScrollIntoView(contextMenu);},populateScrollIntoView:function(contextMenu)
  225. {contextMenu.appendSeparator();contextMenu.appendItem(WebInspector.UIString.capitalize("Scroll into ^view"),this._scrollIntoView.bind(this));},_populateForcedPseudoStateItems:function(subMenu)
  226. {const pseudoClasses=["active","hover","focus","visited"];var node=this._node;var forcedPseudoState=(node?node.getUserProperty("pseudoState"):null)||[];for(var i=0;i<pseudoClasses.length;++i){var pseudoClassForced=forcedPseudoState.indexOf(pseudoClasses[i])>=0;var setPseudoClassCallback=this.treeOutline.setPseudoClassCallback.bind(this.treeOutline,node,pseudoClasses[i],!pseudoClassForced);subMenu.appendCheckboxItem(":"+pseudoClasses[i],setPseudoClassCallback,pseudoClassForced,false);}},populateTextContextMenu:function(contextMenu,textNode)
  227. {if(!this._editing)
  228. contextMenu.appendItem(WebInspector.UIString.capitalize("Edit ^text"),this._startEditingTextNode.bind(this,textNode));this.populateNodeContextMenu(contextMenu);},populateNodeContextMenu:function(contextMenu)
  229. {var openTagElement=this.treeOutline.getCachedTreeElement(this._node)||this;var isEditable=this.hasEditableNode();if(isEditable&&!this._editing)
  230. contextMenu.appendItem(WebInspector.UIString("Edit as HTML"),openTagElement.toggleEditAsHTML.bind(openTagElement));var isShadowRoot=this._node.isShadowRoot();if(this._node.nodeType()===Node.ELEMENT_NODE)
  231. contextMenu.appendItem(WebInspector.UIString.capitalize("Copy CSS ^path"),this._copyCSSPath.bind(this));if(!isShadowRoot)
  232. contextMenu.appendItem(WebInspector.UIString("Copy XPath"),this._copyXPath.bind(this));if(!isShadowRoot){var treeOutline=this.treeOutline;contextMenu.appendSeparator();contextMenu.appendItem(WebInspector.UIString("Cut"),treeOutline.performCopyOrCut.bind(treeOutline,true,this._node),!this.hasEditableNode());contextMenu.appendItem(WebInspector.UIString("Copy"),treeOutline.performCopyOrCut.bind(treeOutline,false,this._node));contextMenu.appendItem(WebInspector.UIString("Paste"),treeOutline.pasteNode.bind(treeOutline,this._node),!treeOutline.canPaste(this._node));}
  233. if(isEditable)
  234. contextMenu.appendItem(WebInspector.UIString("Delete"),this.remove.bind(this));contextMenu.appendSeparator();},_startEditing:function()
  235. {if(this.treeOutline.selectedDOMNode()!==this._node)
  236. return;var listItem=this._listItemNode;if(this._canAddAttributes){var attribute=listItem.getElementsByClassName("webkit-html-attribute")[0];if(attribute)
  237. return this._startEditingAttribute(attribute,attribute.getElementsByClassName("webkit-html-attribute-value")[0]);return this._addNewAttribute();}
  238. if(this._node.nodeType()===Node.TEXT_NODE){var textNode=listItem.getElementsByClassName("webkit-html-text-node")[0];if(textNode)
  239. return this._startEditingTextNode(textNode);return;}},_addNewAttribute:function()
  240. {var container=createElement("span");this._buildAttributeDOM(container," ","");var attr=container.firstElementChild;attr.style.marginLeft="2px";attr.style.marginRight="2px";var tag=this.listItemElement.getElementsByClassName("webkit-html-tag")[0];this._insertInLastAttributePosition(tag,attr);attr.scrollIntoViewIfNeeded(true);return this._startEditingAttribute(attr,attr);},_triggerEditAttribute:function(attributeName)
  241. {var attributeElements=this.listItemElement.getElementsByClassName("webkit-html-attribute-name");for(var i=0,len=attributeElements.length;i<len;++i){if(attributeElements[i].textContent===attributeName){for(var elem=attributeElements[i].nextSibling;elem;elem=elem.nextSibling){if(elem.nodeType!==Node.ELEMENT_NODE)
  242. continue;if(elem.classList.contains("webkit-html-attribute-value"))
  243. return this._startEditingAttribute(elem.parentNode,elem);}}}},_startEditingAttribute:function(attribute,elementForSelection)
  244. {console.assert(this.listItemElement.isAncestor(attribute));if(WebInspector.isBeingEdited(attribute))
  245. return true;var attributeNameElement=attribute.getElementsByClassName("webkit-html-attribute-name")[0];if(!attributeNameElement)
  246. return false;var attributeName=attributeNameElement.textContent;var attributeValueElement=attribute.getElementsByClassName("webkit-html-attribute-value")[0];elementForSelection=attributeValueElement.isAncestor(elementForSelection)?attributeValueElement:elementForSelection;function removeZeroWidthSpaceRecursive(node)
  247. {if(node.nodeType===Node.TEXT_NODE){node.nodeValue=node.nodeValue.replace(/\u200B/g,"");return;}
  248. if(node.nodeType!==Node.ELEMENT_NODE)
  249. return;for(var child=node.firstChild;child;child=child.nextSibling)
  250. removeZeroWidthSpaceRecursive(child);}
  251. var attributeValue=attributeName&&attributeValueElement?this._node.getAttribute(attributeName):undefined;if(attributeValue!==undefined)
  252. attributeValueElement.textContent=attributeValue;removeZeroWidthSpaceRecursive(attribute);var config=new WebInspector.InplaceEditor.Config(this._attributeEditingCommitted.bind(this),this._editingCancelled.bind(this),attributeName);function handleKeyDownEvents(event)
  253. {var isMetaOrCtrl=WebInspector.isMac()?event.metaKey&&!event.shiftKey&&!event.ctrlKey&&!event.altKey:event.ctrlKey&&!event.shiftKey&&!event.metaKey&&!event.altKey;if(isEnterKey(event)&&(event.isMetaOrCtrlForTest||!config.multiline||isMetaOrCtrl))
  254. return"commit";else if(event.keyCode===WebInspector.KeyboardShortcut.Keys.Esc.code||event.keyIdentifier==="U+001B")
  255. return"cancel";else if(event.keyIdentifier==="U+0009")
  256. return"move-"+(event.shiftKey?"backward":"forward");else{WebInspector.handleElementValueModifications(event,attribute);return"";}}
  257. config.customFinishHandler=handleKeyDownEvents;this._editing=WebInspector.InplaceEditor.startEditing(attribute,config);this.listItemElement.window().getSelection().setBaseAndExtent(elementForSelection,0,elementForSelection,1);return true;},_startEditingTextNode:function(textNodeElement)
  258. {if(WebInspector.isBeingEdited(textNodeElement))
  259. return true;var textNode=this._node;if(textNode.nodeType()===Node.ELEMENT_NODE&&textNode.firstChild)
  260. textNode=textNode.firstChild;var container=textNodeElement.enclosingNodeOrSelfWithClass("webkit-html-text-node");if(container)
  261. container.textContent=textNode.nodeValue();var config=new WebInspector.InplaceEditor.Config(this._textNodeEditingCommitted.bind(this,textNode),this._editingCancelled.bind(this));this._editing=WebInspector.InplaceEditor.startEditing(textNodeElement,config);this.listItemElement.window().getSelection().setBaseAndExtent(textNodeElement,0,textNodeElement,1);return true;},_startEditingTagName:function(tagNameElement)
  262. {if(!tagNameElement){tagNameElement=this.listItemElement.getElementsByClassName("webkit-html-tag-name")[0];if(!tagNameElement)
  263. return false;}
  264. var tagName=tagNameElement.textContent;if(WebInspector.ElementsTreeElement.EditTagBlacklist[tagName.toLowerCase()])
  265. return false;if(WebInspector.isBeingEdited(tagNameElement))
  266. return true;var closingTagElement=this._distinctClosingTagElement();function keyupListener(event)
  267. {if(closingTagElement)
  268. closingTagElement.textContent="</"+tagNameElement.textContent+">";}
  269. function editingComitted(element,newTagName)
  270. {tagNameElement.removeEventListener('keyup',keyupListener,false);this._tagNameEditingCommitted.apply(this,arguments);}
  271. function editingCancelled()
  272. {tagNameElement.removeEventListener('keyup',keyupListener,false);this._editingCancelled.apply(this,arguments);}
  273. tagNameElement.addEventListener('keyup',keyupListener,false);var config=new WebInspector.InplaceEditor.Config(editingComitted.bind(this),editingCancelled.bind(this),tagName);this._editing=WebInspector.InplaceEditor.startEditing(tagNameElement,config);this.listItemElement.window().getSelection().setBaseAndExtent(tagNameElement,0,tagNameElement,1);return true;},_startEditingAsHTML:function(commitCallback,error,initialValue)
  274. {if(error)
  275. return;if(this._editing)
  276. return;function consume(event)
  277. {if(event.eventPhase===Event.AT_TARGET)
  278. event.consume(true);}
  279. initialValue=this._convertWhitespaceToEntities(initialValue).text;this._htmlEditElement=createElement("div");this._htmlEditElement.className="source-code elements-tree-editor";var child=this.listItemElement.firstChild;while(child){child.style.display="none";child=child.nextSibling;}
  280. if(this._childrenListNode)
  281. this._childrenListNode.style.display="none";this.listItemElement.appendChild(this._htmlEditElement);this.treeOutline.childrenListElement.parentElement.addEventListener("mousedown",consume,false);this.updateSelection();function commit(element,newValue)
  282. {commitCallback(initialValue,newValue);dispose.call(this);}
  283. function dispose()
  284. {delete this._editing;this.treeOutline.setMultilineEditing(null);this.listItemElement.removeChild(this._htmlEditElement);delete this._htmlEditElement;if(this._childrenListNode)
  285. this._childrenListNode.style.removeProperty("display");var child=this.listItemElement.firstChild;while(child){child.style.removeProperty("display");child=child.nextSibling;}
  286. this.treeOutline.childrenListElement.parentElement.removeEventListener("mousedown",consume,false);this.updateSelection();this.treeOutline.focus();}
  287. var config=new WebInspector.InplaceEditor.Config(commit.bind(this),dispose.bind(this));config.setMultilineOptions(initialValue,{name:"xml",htmlMode:true},"web-inspector-html",WebInspector.settings.domWordWrap.get(),true);WebInspector.InplaceEditor.startMultilineEditing(this._htmlEditElement,config).then(markAsBeingEdited.bind(this));function markAsBeingEdited(controller)
  288. {this._editing=(controller);this._editing.setWidth(this.treeOutline.visibleWidth());this.treeOutline.setMultilineEditing(this._editing);}},_attributeEditingCommitted:function(element,newText,oldText,attributeName,moveDirection)
  289. {delete this._editing;var treeOutline=this.treeOutline;function moveToNextAttributeIfNeeded(error)
  290. {if(error)
  291. this._editingCancelled(element,attributeName);if(!moveDirection)
  292. return;treeOutline.runPendingUpdates();var attributes=this._node.attributes();for(var i=0;i<attributes.length;++i){if(attributes[i].name!==attributeName)
  293. continue;if(moveDirection==="backward"){if(i===0)
  294. this._startEditingTagName();else
  295. this._triggerEditAttribute(attributes[i-1].name);}else{if(i===attributes.length-1)
  296. this._addNewAttribute();else
  297. this._triggerEditAttribute(attributes[i+1].name);}
  298. return;}
  299. if(moveDirection==="backward"){if(newText===" "){if(attributes.length>0)
  300. this._triggerEditAttribute(attributes[attributes.length-1].name);}else{if(attributes.length>1)
  301. this._triggerEditAttribute(attributes[attributes.length-2].name);}}else if(moveDirection==="forward"){if(!/^\s*$/.test(newText))
  302. this._addNewAttribute();else
  303. this._startEditingTagName();}}
  304. if((attributeName.trim()||newText.trim())&&oldText!==newText){this._node.setAttribute(attributeName,newText,moveToNextAttributeIfNeeded.bind(this));return;}
  305. this.updateTitle();moveToNextAttributeIfNeeded.call(this);},_tagNameEditingCommitted:function(element,newText,oldText,tagName,moveDirection)
  306. {delete this._editing;var self=this;function cancel()
  307. {var closingTagElement=self._distinctClosingTagElement();if(closingTagElement)
  308. closingTagElement.textContent="</"+tagName+">";self._editingCancelled(element,tagName);moveToNextAttributeIfNeeded.call(self);}
  309. function moveToNextAttributeIfNeeded()
  310. {if(moveDirection!=="forward"){this._addNewAttribute();return;}
  311. var attributes=this._node.attributes();if(attributes.length>0)
  312. this._triggerEditAttribute(attributes[0].name);else
  313. this._addNewAttribute();}
  314. newText=newText.trim();if(newText===oldText){cancel();return;}
  315. var treeOutline=this.treeOutline;var wasExpanded=this.expanded;function changeTagNameCallback(error,nodeId)
  316. {if(error||!nodeId){cancel();return;}
  317. var newTreeItem=treeOutline.selectNodeAfterEdit(wasExpanded,error,nodeId);moveToNextAttributeIfNeeded.call(newTreeItem);}
  318. this._node.setNodeName(newText,changeTagNameCallback);},_textNodeEditingCommitted:function(textNode,element,newText)
  319. {delete this._editing;function callback()
  320. {this.updateTitle();}
  321. textNode.setNodeValue(newText,callback.bind(this));},_editingCancelled:function(element,context)
  322. {delete this._editing;this.updateTitle();},_distinctClosingTagElement:function()
  323. {if(this.expanded){var closers=this._childrenListNode.querySelectorAll(".close");return closers[closers.length-1];}
  324. var tags=this.listItemElement.getElementsByClassName("webkit-html-tag");return(tags.length===1?null:tags[tags.length-1]);},updateTitle:function(onlySearchQueryChanged)
  325. {if(this._editing)
  326. return;if(onlySearchQueryChanged){this._hideSearchHighlight();}else{var nodeInfo=this._nodeTitleInfo(WebInspector.linkifyURLAsNode);if(nodeInfo.shadowRoot)
  327. this.listItemElement.classList.add("shadow-root");var highlightElement=createElement("span");highlightElement.className="highlight";highlightElement.appendChild(nodeInfo.titleDOM);this.title=highlightElement;this._updateDecorations();delete this._highlightResult;}
  328. delete this.selectionElement;if(this.selected)
  329. this.updateSelection();this._preventFollowingLinksOnDoubleClick();this._highlightSearchResults();},_createDecoratorElement:function()
  330. {var node=this._node;var decoratorMessages=[];var parentDecoratorMessages=[];var decorators=this.treeOutline.nodeDecorators();for(var i=0;i<decorators.length;++i){var decorator=decorators[i];var message=decorator.decorate(node);if(message){decoratorMessages.push(message);continue;}
  331. if(this.expanded||this._elementCloseTag)
  332. continue;message=decorator.decorateAncestor(node);if(message)
  333. parentDecoratorMessages.push(message)}
  334. if(!decoratorMessages.length&&!parentDecoratorMessages.length)
  335. return null;var decoratorElement=createElement("div");decoratorElement.classList.add("elements-gutter-decoration");if(!decoratorMessages.length)
  336. decoratorElement.classList.add("elements-has-decorated-children");decoratorElement.title=decoratorMessages.concat(parentDecoratorMessages).join("\n");return decoratorElement;},_updateDecorations:function()
  337. {if(this._decoratorElement)
  338. this._decoratorElement.remove();this._decoratorElement=this._createDecoratorElement();if(this._decoratorElement&&this.listItemElement)
  339. this.listItemElement.insertBefore(this._decoratorElement,this.listItemElement.firstChild);},_buildAttributeDOM:function(parentElement,name,value,forceValue,node,linkify)
  340. {var closingPunctuationRegex=/[\/;:\)\]\}]/g;var highlightIndex=0;var highlightCount;var additionalHighlightOffset=0;var result;function replacer(match,replaceOffset){while(highlightIndex<highlightCount&&result.entityRanges[highlightIndex].offset<replaceOffset){result.entityRanges[highlightIndex].offset+=additionalHighlightOffset;++highlightIndex;}
  341. additionalHighlightOffset+=1;return match+"\u200B";}
  342. function setValueWithEntities(element,value)
  343. {result=this._convertWhitespaceToEntities(value);highlightCount=result.entityRanges.length;value=result.text.replace(closingPunctuationRegex,replacer);while(highlightIndex<highlightCount){result.entityRanges[highlightIndex].offset+=additionalHighlightOffset;++highlightIndex;}
  344. element.textContent=value;WebInspector.highlightRangesWithStyleClass(element,result.entityRanges,"webkit-html-entity-value");}
  345. var hasText=(forceValue||value.length>0);var attrSpanElement=parentElement.createChild("span","webkit-html-attribute");var attrNameElement=attrSpanElement.createChild("span","webkit-html-attribute-name");attrNameElement.textContent=name;if(hasText)
  346. attrSpanElement.createTextChild("=\u200B\"");var attrValueElement=attrSpanElement.createChild("span","webkit-html-attribute-value");var updates=this._updateInfo;if(updates&&updates.isAttributeModified(name))
  347. WebInspector.runCSSAnimationOnce(hasText?attrValueElement:attrNameElement,"dom-update-highlight");function linkifyValue(value)
  348. {var rewrittenHref=node.resolveURL(value);if(rewrittenHref===null){var span=createElement("span");setValueWithEntities.call(this,span,value);return span;}
  349. value=value.replace(closingPunctuationRegex,"$&\u200B");if(value.startsWith("data:"))
  350. value=value.trimMiddle(60);var anchor=linkify(rewrittenHref,value,"",node.nodeName().toLowerCase()==="a");anchor.preventFollow=true;return anchor;}
  351. if(linkify&&(name==="src"||name==="href")){attrValueElement.appendChild(linkifyValue.call(this,value));}else if(linkify&&node.nodeName().toLowerCase()==="img"&&name==="srcset"){var sources=value.split(",");for(var i=0;i<sources.length;++i){if(i>0)
  352. attrValueElement.createTextChild(", ");var source=sources[i].trim();var indexOfSpace=source.indexOf(" ");var url=source.substring(0,indexOfSpace);var tail=source.substring(indexOfSpace);attrValueElement.appendChild(linkifyValue.call(this,url));attrValueElement.createTextChild(tail);}}else{setValueWithEntities.call(this,attrValueElement,value);}
  353. if(hasText)
  354. attrSpanElement.createTextChild("\"");},_buildPseudoElementDOM:function(parentElement,pseudoElementName)
  355. {var pseudoElement=parentElement.createChild("span","webkit-html-pseudo-element");pseudoElement.textContent="::"+pseudoElementName;parentElement.createTextChild("\u200B");},_buildTagDOM:function(parentElement,tagName,isClosingTag,isDistinctTreeElement,linkify)
  356. {var node=this._node;var classes=["webkit-html-tag"];if(isClosingTag&&isDistinctTreeElement)
  357. classes.push("close");var tagElement=parentElement.createChild("span",classes.join(" "));tagElement.createTextChild("<");var tagNameElement=tagElement.createChild("span",isClosingTag?"":"webkit-html-tag-name");tagNameElement.textContent=(isClosingTag?"/":"")+tagName;if(!isClosingTag){if(node.hasAttributes()){var attributes=node.attributes();for(var i=0;i<attributes.length;++i){var attr=attributes[i];tagElement.createTextChild(" ");this._buildAttributeDOM(tagElement,attr.name,attr.value,false,node,linkify);}}
  358. var hasUpdates;var updates=this._updateInfo;if(updates){hasUpdates|=updates.hasRemovedAttributes();var hasInlineText=this._childrenDisplayMode===WebInspector.ElementsTreeElement.ChildrenDisplayMode.InlineText;hasUpdates|=(!hasInlineText||this.expanded)&&updates.hasChangedChildren();hasUpdates|=!this.expanded&&updates.hasInsertedNodes()&&(!hasInlineText||this._node.firstChild.nodeValue().length===0);hasUpdates|=hasInlineText&&(updates.isCharDataModified()||updates.hasChangedChildren())&&this._node.firstChild.nodeValue().length===0;}
  359. if(hasUpdates)
  360. WebInspector.runCSSAnimationOnce(tagNameElement,"dom-update-highlight");}
  361. tagElement.createTextChild(">");parentElement.createTextChild("\u200B");},_convertWhitespaceToEntities:function(text)
  362. {var result="";var lastIndexAfterEntity=0;var entityRanges=[];var charToEntity=WebInspector.ElementsTreeOutline.MappedCharToEntity;for(var i=0,size=text.length;i<size;++i){var char=text.charAt(i);if(charToEntity[char]){result+=text.substring(lastIndexAfterEntity,i);var entityValue="&"+charToEntity[char]+";";entityRanges.push({offset:result.length,length:entityValue.length});result+=entityValue;lastIndexAfterEntity=i+1;}}
  363. if(result)
  364. result+=text.substring(lastIndexAfterEntity);return{text:result||text,entityRanges:entityRanges};},_nodeTitleInfo:function(linkify)
  365. {var node=this._node;var info={titleDOM:createDocumentFragment(),hasChildren:this.hasChildren};switch(node.nodeType()){case Node.ATTRIBUTE_NODE:this._buildAttributeDOM(info.titleDOM,(node.name),(node.value),true);break;case Node.ELEMENT_NODE:var pseudoType=node.pseudoType();if(pseudoType){this._buildPseudoElementDOM(info.titleDOM,pseudoType);info.hasChildren=false;break;}
  366. var tagName=node.nodeNameInCorrectCase();if(this._elementCloseTag){this._buildTagDOM(info.titleDOM,tagName,true,true);info.hasChildren=false;break;}
  367. this._buildTagDOM(info.titleDOM,tagName,false,false,linkify);switch(this._childrenDisplayMode){case WebInspector.ElementsTreeElement.ChildrenDisplayMode.HasChildren:if(!this.expanded){var textNodeElement=info.titleDOM.createChild("span","webkit-html-text-node bogus");textNodeElement.textContent="\u2026";info.titleDOM.createTextChild("\u200B");this._buildTagDOM(info.titleDOM,tagName,true,false);}
  368. break;case WebInspector.ElementsTreeElement.ChildrenDisplayMode.InlineText:var textNodeElement=info.titleDOM.createChild("span","webkit-html-text-node");var result=this._convertWhitespaceToEntities(node.firstChild.nodeValue());textNodeElement.textContent=result.text;WebInspector.highlightRangesWithStyleClass(textNodeElement,result.entityRanges,"webkit-html-entity-value");info.titleDOM.createTextChild("\u200B");info.hasChildren=false;this._buildTagDOM(info.titleDOM,tagName,true,false);var updates=this._updateInfo;if(updates&&(updates.hasInsertedNodes()||updates.hasChangedChildren()))
  369. WebInspector.runCSSAnimationOnce(textNodeElement,"dom-update-highlight");updates=this._updateInfo;if(updates&&updates.isCharDataModified())
  370. WebInspector.runCSSAnimationOnce(textNodeElement,"dom-update-highlight");break;case WebInspector.ElementsTreeElement.ChildrenDisplayMode.NoChildren:if(this.treeOutline.isXMLMimeType||!WebInspector.ElementsTreeElement.ForbiddenClosingTagElements[tagName])
  371. this._buildTagDOM(info.titleDOM,tagName,true,false);break;}
  372. break;case Node.TEXT_NODE:if(node.parentNode&&node.parentNode.nodeName().toLowerCase()==="script"){var newNode=info.titleDOM.createChild("span","webkit-html-text-node webkit-html-js-node");newNode.textContent=node.nodeValue();var javascriptSyntaxHighlighter=new WebInspector.DOMSyntaxHighlighter("text/javascript",true);javascriptSyntaxHighlighter.syntaxHighlightNode(newNode).then(updateSearchHighlight.bind(this));}else if(node.parentNode&&node.parentNode.nodeName().toLowerCase()==="style"){var newNode=info.titleDOM.createChild("span","webkit-html-text-node webkit-html-css-node");newNode.textContent=node.nodeValue();var cssSyntaxHighlighter=new WebInspector.DOMSyntaxHighlighter("text/css",true);cssSyntaxHighlighter.syntaxHighlightNode(newNode).then(updateSearchHighlight.bind(this));}else{info.titleDOM.createTextChild("\"");var textNodeElement=info.titleDOM.createChild("span","webkit-html-text-node");var result=this._convertWhitespaceToEntities(node.nodeValue());textNodeElement.textContent=result.text;WebInspector.highlightRangesWithStyleClass(textNodeElement,result.entityRanges,"webkit-html-entity-value");info.titleDOM.createTextChild("\"");var updates=this._updateInfo;if(updates&&updates.isCharDataModified())
  373. WebInspector.runCSSAnimationOnce(textNodeElement,"dom-update-highlight");}
  374. break;case Node.COMMENT_NODE:var commentElement=info.titleDOM.createChild("span","webkit-html-comment");commentElement.createTextChild("<!--"+node.nodeValue()+"-->");break;case Node.DOCUMENT_TYPE_NODE:var docTypeElement=info.titleDOM.createChild("span","webkit-html-doctype");docTypeElement.createTextChild("<!DOCTYPE "+node.nodeName());if(node.publicId){docTypeElement.createTextChild(" PUBLIC \""+node.publicId+"\"");if(node.systemId)
  375. docTypeElement.createTextChild(" \""+node.systemId+"\"");}else if(node.systemId)
  376. docTypeElement.createTextChild(" SYSTEM \""+node.systemId+"\"");if(node.internalSubset)
  377. docTypeElement.createTextChild(" ["+node.internalSubset+"]");docTypeElement.createTextChild(">");break;case Node.CDATA_SECTION_NODE:var cdataElement=info.titleDOM.createChild("span","webkit-html-text-node");cdataElement.createTextChild("<![CDATA["+node.nodeValue()+"]]>");break;case Node.DOCUMENT_FRAGMENT_NODE:var fragmentElement=info.titleDOM.createChild("span","webkit-html-fragment");if(node.isInShadowTree()){var shadowRootType=node.shadowRootType();if(shadowRootType){info.shadowRoot=true;fragmentElement.classList.add("shadow-root");}}
  378. fragmentElement.textContent=node.nodeNameInCorrectCase().collapseWhitespace();break;default:info.titleDOM.createTextChild(node.nodeNameInCorrectCase().collapseWhitespace());}
  379. function updateSearchHighlight()
  380. {delete this._highlightResult;this._highlightSearchResults();}
  381. return info;},remove:function()
  382. {if(this._node.pseudoType())
  383. return;var parentElement=this.parent;if(!parentElement)
  384. return;if(!this._node.parentNode||this._node.parentNode.nodeType()===Node.DOCUMENT_NODE)
  385. return;this._node.removeNode();},toggleEditAsHTML:function(callback)
  386. {if(this._editing&&this._htmlEditElement&&WebInspector.isBeingEdited(this._htmlEditElement)){this._editing.commit();return;}
  387. function selectNode(error)
  388. {callback(!error);}
  389. function commitChange(initialValue,value)
  390. {if(initialValue!==value)
  391. node.setOuterHTML(value,selectNode);}
  392. var node=this._node;node.getOuterHTML(this._startEditingAsHTML.bind(this,commitChange));},_copyCSSPath:function()
  393. {InspectorFrontendHost.copyText(WebInspector.DOMPresentationUtils.cssPath(this._node,true));},_copyXPath:function()
  394. {InspectorFrontendHost.copyText(WebInspector.DOMPresentationUtils.xPath(this._node,true));},_highlightSearchResults:function()
  395. {if(!this._searchQuery||!this._searchHighlightsVisible)
  396. return;this._hideSearchHighlight();var text=this.listItemElement.textContent;var regexObject=createPlainTextSearchRegex(this._searchQuery,"gi");var match=regexObject.exec(text);var matchRanges=[];while(match){matchRanges.push(new WebInspector.SourceRange(match.index,match[0].length));match=regexObject.exec(text);}
  397. if(!matchRanges.length)
  398. matchRanges.push(new WebInspector.SourceRange(0,text.length));this._highlightResult=[];WebInspector.highlightSearchResults(this.listItemElement,matchRanges,this._highlightResult);},_scrollIntoView:function()
  399. {function scrollIntoViewCallback(object)
  400. {function scrollIntoView()
  401. {this.scrollIntoViewIfNeeded(true);}
  402. if(object)
  403. object.callFunction(scrollIntoView);}
  404. this._node.resolveToObject("",scrollIntoViewCallback);},__proto__:TreeElement.prototype};WebInspector.ElementsTreeOutline=function(target,omitRootDOMNode,selectEnabled,setPseudoClassCallback)
  405. {this._target=target;this._domModel=target.domModel;var element=createElement("div");this._shadowRoot=element.createShadowRoot();this._shadowRoot.appendChild(WebInspector.View.createStyleElement("elements/elementsTreeOutline.css"));this._elementsTreeUpdater=new WebInspector.ElementsTreeUpdater(this._domModel,this);var outlineDisclosureElement=this._shadowRoot.createChild("div","outline-disclosure");WebInspector.installComponentRootStyles(outlineDisclosureElement);this._element=outlineDisclosureElement.createChild("ol","elements-tree-outline source-code");this._element.addEventListener("mousedown",this._onmousedown.bind(this),false);this._element.addEventListener("mousemove",this._onmousemove.bind(this),false);this._element.addEventListener("mouseleave",this._onmouseleave.bind(this),false);this._element.addEventListener("dragstart",this._ondragstart.bind(this),false);this._element.addEventListener("dragover",this._ondragover.bind(this),false);this._element.addEventListener("dragleave",this._ondragleave.bind(this),false);this._element.addEventListener("drop",this._ondrop.bind(this),false);this._element.addEventListener("dragend",this._ondragend.bind(this),false);this._element.addEventListener("keydown",this._onkeydown.bind(this),false);this._element.addEventListener("webkitAnimationEnd",this._onAnimationEnd.bind(this),false);this._element.addEventListener("contextmenu",this._contextMenuEventFired.bind(this),false);TreeOutline.call(this,this._element);this.element=element;this._includeRootDOMNode=!omitRootDOMNode;this._selectEnabled=selectEnabled;this._rootDOMNode=null;this._selectedDOMNode=null;this._eventSupport=new WebInspector.Object();this._visible=false;this._pickNodeMode=false;this.setPseudoClassCallback=setPseudoClassCallback;this._createNodeDecorators();this._popoverHelper=new WebInspector.PopoverHelper(this._element,this._getPopoverAnchor.bind(this),this._showPopover.bind(this));this._popoverHelper.setTimeout(0);this._shadowHostDisplayModes=new WeakMap();}
  406. WebInspector.ElementsTreeOutline.ClipboardData;WebInspector.ElementsTreeOutline.Events={NodePicked:"NodePicked",SelectedNodeChanged:"SelectedNodeChanged",ElementsTreeUpdated:"ElementsTreeUpdated"}
  407. WebInspector.ElementsTreeOutline.MappedCharToEntity={"\u00a0":"nbsp","\u2002":"ensp","\u2003":"emsp","\u2009":"thinsp","\u200a":"#8202","\u200b":"#8203","\u200c":"zwnj","\u200d":"zwj","\u200e":"lrm","\u200f":"rlm","\u202a":"#8234","\u202b":"#8235","\u202c":"#8236","\u202d":"#8237","\u202e":"#8238"}
  408. WebInspector.ElementsTreeOutline.ShadowHostDisplayMode={Composed:"Composed",Flattened:"Flattened",}
  409. WebInspector.ElementsTreeOutline.prototype={focus:function()
  410. {this._element.focus();},setWordWrap:function(wrap)
  411. {this._element.classList.toggle("elements-tree-nowrap",!wrap);},_onAnimationEnd:function(event)
  412. {event.target.classList.remove("elements-tree-element-pick-node-1");event.target.classList.remove("elements-tree-element-pick-node-2");},pickNodeMode:function()
  413. {return this._pickNodeMode;},setPickNodeMode:function(value)
  414. {this._pickNodeMode=value;this._element.classList.toggle("pick-node-mode",value);},handlePickNode:function(element,node)
  415. {if(!this._pickNodeMode)
  416. return false;this._eventSupport.dispatchEventToListeners(WebInspector.ElementsTreeOutline.Events.NodePicked,node);var hasRunningAnimation=element.classList.contains("elements-tree-element-pick-node-1")||element.classList.contains("elements-tree-element-pick-node-2");element.classList.toggle("elements-tree-element-pick-node-1");if(hasRunningAnimation)
  417. element.classList.toggle("elements-tree-element-pick-node-2");return true;},target:function()
  418. {return this._target;},domModel:function()
  419. {return this._domModel;},setMultilineEditing:function(multilineEditing)
  420. {this._multilineEditing=multilineEditing;},visibleWidth:function()
  421. {return this._visibleWidth;},setVisibleWidth:function(width)
  422. {this._visibleWidth=width;if(this._multilineEditing)
  423. this._multilineEditing.setWidth(this._visibleWidth);},nodeDecorators:function()
  424. {return this._nodeDecorators;},_createNodeDecorators:function()
  425. {this._nodeDecorators=[];this._nodeDecorators.push(new WebInspector.ElementsTreeOutline.PseudoStateDecorator());},wireToDOMModel:function()
  426. {this._elementsTreeUpdater._addDOMModelListeners();},unwireFromDOMModel:function()
  427. {this._elementsTreeUpdater._removeDOMModelListeners();},_setClipboardData:function(data)
  428. {if(this._clipboardNodeData){var treeElement=this.findTreeElement(this._clipboardNodeData.node);if(treeElement)
  429. treeElement.setInClipboard(false);delete this._clipboardNodeData;}
  430. if(data){var treeElement=this.findTreeElement(data.node);if(treeElement)
  431. treeElement.setInClipboard(true);this._clipboardNodeData=data;}},resetClipboardIfNeeded:function(removedNode)
  432. {if(this._clipboardNodeData&&this._clipboardNodeData.node===removedNode)
  433. this._setClipboardData(null);},handleCopyOrCutKeyboardEvent:function(isCut,event)
  434. {this._setClipboardData(null);if(!event.target.window().getSelection().isCollapsed)
  435. return;if(WebInspector.isEditing())
  436. return;var targetNode=this.selectedDOMNode();if(!targetNode)
  437. return;event.clipboardData.clearData();event.preventDefault();this.performCopyOrCut(isCut,targetNode);},performCopyOrCut:function(isCut,node)
  438. {if(isCut&&(node.isShadowRoot()||node.ancestorUserAgentShadowRoot()))
  439. return;node.copyNode();this._setClipboardData({node:node,isCut:isCut});},canPaste:function(targetNode)
  440. {if(targetNode.isShadowRoot()||targetNode.ancestorUserAgentShadowRoot())
  441. return false;if(!this._clipboardNodeData)
  442. return false;var node=this._clipboardNodeData.node;if(this._clipboardNodeData.isCut&&(node===targetNode||node.isAncestor(targetNode)))
  443. return false;if(targetNode.target()!==node.target())
  444. return false;return true;},pasteNode:function(targetNode)
  445. {if(this.canPaste(targetNode))
  446. this._performPaste(targetNode);},handlePasteKeyboardEvent:function(event)
  447. {if(WebInspector.isEditing())
  448. return;var targetNode=this.selectedDOMNode();if(!targetNode||!this.canPaste(targetNode))
  449. return;event.preventDefault();this._performPaste(targetNode);},_performPaste:function(targetNode)
  450. {if(this._clipboardNodeData.isCut){this._clipboardNodeData.node.moveTo(targetNode,null,expandCallback.bind(this));this._setClipboardData(null);}else{this._clipboardNodeData.node.copyTo(targetNode,null,expandCallback.bind(this));}
  451. function expandCallback(error,nodeId)
  452. {if(error)
  453. return;var pastedNode=this._domModel.nodeForId(nodeId);if(!pastedNode)
  454. return;this.selectDOMNode(pastedNode);}},setVisible:function(visible)
  455. {this._visible=visible;if(!this._visible){this._popoverHelper.hidePopover();return;}
  456. this.runPendingUpdates();if(this._selectedDOMNode)
  457. this._revealAndSelectNode(this._selectedDOMNode,false);},addEventListener:function(eventType,listener,thisObject)
  458. {this._eventSupport.addEventListener(eventType,listener,thisObject);},removeEventListener:function(eventType,listener,thisObject)
  459. {this._eventSupport.removeEventListener(eventType,listener,thisObject);},get rootDOMNode()
  460. {return this._rootDOMNode;},set rootDOMNode(x)
  461. {if(this._rootDOMNode===x)
  462. return;this._rootDOMNode=x;this._isXMLMimeType=x&&x.isXMLNode();this.update();},get isXMLMimeType()
  463. {return this._isXMLMimeType;},selectedDOMNode:function()
  464. {return this._selectedDOMNode;},selectDOMNode:function(node,focus)
  465. {if(this._selectedDOMNode===node){this._revealAndSelectNode(node,!focus);return;}
  466. this._selectedDOMNode=node;this._revealAndSelectNode(node,!focus);if(this._selectedDOMNode===node)
  467. this._selectedNodeChanged();},editing:function()
  468. {var node=this.selectedDOMNode();if(!node)
  469. return false;var treeElement=this.findTreeElement(node);if(!treeElement)
  470. return false;return treeElement.isEditing()||false;},update:function()
  471. {var selectedNode=this.selectedTreeElement?this.selectedTreeElement.node():null;this.removeChildren();if(!this.rootDOMNode)
  472. return;var treeElement;if(this._includeRootDOMNode){treeElement=this._elementsTreeUpdater._createElementTreeElement(this.rootDOMNode);this.appendChild(treeElement);}else{var node=this.rootDOMNode.firstChild;while(node){treeElement=this._elementsTreeUpdater._createElementTreeElement(node);this.appendChild(treeElement);node=node.nextSibling;}}
  473. if(selectedNode)
  474. this._revealAndSelectNode(selectedNode,true);},updateSelection:function()
  475. {if(!this.selectedTreeElement)
  476. return;var element=this.treeOutline.selectedTreeElement;element.updateSelection();},updateOpenCloseTags:function(node)
  477. {var treeElement=this.findTreeElement(node);if(treeElement)
  478. treeElement.updateTitle();var children=treeElement.children;var closingTagElement=children[children.length-1];if(closingTagElement&&closingTagElement.isClosingTag())
  479. closingTagElement.updateTitle();},_selectedNodeChanged:function()
  480. {this._eventSupport.dispatchEventToListeners(WebInspector.ElementsTreeOutline.Events.SelectedNodeChanged,this._selectedDOMNode);},_fireElementsTreeUpdated:function(nodes)
  481. {this._eventSupport.dispatchEventToListeners(WebInspector.ElementsTreeOutline.Events.ElementsTreeUpdated,nodes);},findTreeElement:function(node)
  482. {var treeElement=this._lookUpTreeElement(node);if(!treeElement&&node.nodeType()===Node.TEXT_NODE){treeElement=this._lookUpTreeElement(node.parentNode);}
  483. return(treeElement);},_lookUpTreeElement:function(node)
  484. {if(!node)
  485. return null;var cachedElement=this.getCachedTreeElement(node);if(cachedElement)
  486. return cachedElement;var ancestors=[];for(var currentNode=node.parentNode;currentNode;currentNode=currentNode.parentNode){ancestors.push(currentNode);if(this.getCachedTreeElement(currentNode))
  487. break;}
  488. if(!currentNode)
  489. return null;for(var i=ancestors.length-1;i>=0;--i){var treeElement=this.getCachedTreeElement(ancestors[i]);if(treeElement)
  490. treeElement.onpopulate();}
  491. return this.getCachedTreeElement(node);},createTreeElementFor:function(node)
  492. {var treeElement=this.findTreeElement(node);if(treeElement)
  493. return treeElement;if(!node.parentNode)
  494. return null;treeElement=this.createTreeElementFor(node.parentNode);return treeElement?this._elementsTreeUpdater._showChild(treeElement,node):null;},set suppressRevealAndSelect(x)
  495. {if(this._suppressRevealAndSelect===x)
  496. return;this._suppressRevealAndSelect=x;},_revealAndSelectNode:function(node,omitFocus)
  497. {if(this._suppressRevealAndSelect)
  498. return;if(!this._includeRootDOMNode&&node===this.rootDOMNode&&this.rootDOMNode)
  499. node=this.rootDOMNode.firstChild;if(!node)
  500. return;var treeElement=this.createTreeElementFor(node);if(!treeElement)
  501. return;treeElement.revealAndSelect(omitFocus);},_treeElementFromEvent:function(event)
  502. {var scrollContainer=this.element.parentElement;var x=scrollContainer.totalOffsetLeft()+scrollContainer.offsetWidth-36;var y=event.pageY;var elementUnderMouse=this.treeElementFromPoint(x,y);var elementAboveMouse=this.treeElementFromPoint(x,y-2);var element;if(elementUnderMouse===elementAboveMouse)
  503. element=elementUnderMouse;else
  504. element=this.treeElementFromPoint(x,y+2);return element;},_getPopoverAnchor:function(element,event)
  505. {var anchor=element.enclosingNodeOrSelfWithClass("webkit-html-resource-link");if(!anchor||!anchor.href)
  506. return;return anchor;},_loadDimensionsForNode:function(node,callback)
  507. {if(!node.nodeName()||node.nodeName().toLowerCase()!=="img"){callback();return;}
  508. node.resolveToObject("",resolvedNode);function resolvedNode(object)
  509. {if(!object){callback();return;}
  510. object.callFunctionJSON(features,undefined,callback);object.release();function features()
  511. {return{offsetWidth:this.offsetWidth,offsetHeight:this.offsetHeight,naturalWidth:this.naturalWidth,naturalHeight:this.naturalHeight,currentSrc:this.currentSrc};}}},_showPopover:function(anchor,popover)
  512. {var listItem=anchor.enclosingNodeOrSelfWithNodeName("li");var node=(listItem.treeElement).node();this._loadDimensionsForNode(node,WebInspector.DOMPresentationUtils.buildImagePreviewContents.bind(WebInspector.DOMPresentationUtils,node.target(),anchor.href,true,showPopover));function showPopover(contents)
  513. {if(!contents)
  514. return;popover.setCanShrink(false);popover.showForAnchor(contents,anchor);}},_onmousedown:function(event)
  515. {var element=this._treeElementFromEvent(event);if(!element||element.isEventWithinDisclosureTriangle(event))
  516. return;element.select();},_onmousemove:function(event)
  517. {var element=this._treeElementFromEvent(event);if(element&&this._previousHoveredElement===element)
  518. return;if(this._previousHoveredElement){this._previousHoveredElement.hovered=false;delete this._previousHoveredElement;}
  519. if(element){element.hovered=true;this._previousHoveredElement=element;}
  520. if(!(element instanceof WebInspector.ElementsTreeElement))
  521. return;if(element&&element.node())
  522. this._domModel.highlightDOMNodeWithConfig(element.node().id,{mode:"all",showInfo:!WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(event)});else
  523. this._domModel.hideDOMNodeHighlight();},_onmouseleave:function(event)
  524. {if(this._previousHoveredElement){this._previousHoveredElement.hovered=false;delete this._previousHoveredElement;}
  525. this._domModel.hideDOMNodeHighlight();},_ondragstart:function(event)
  526. {if(!event.target.window().getSelection().isCollapsed)
  527. return false;if(event.target.nodeName==="A")
  528. return false;var treeElement=this._treeElementFromEvent(event);if(!this._isValidDragSourceOrTarget(treeElement))
  529. return false;if(treeElement.node().nodeName()==="BODY"||treeElement.node().nodeName()==="HEAD")
  530. return false;event.dataTransfer.setData("text/plain",treeElement.listItemElement.textContent.replace(/\u200b/g,""));event.dataTransfer.effectAllowed="copyMove";this._treeElementBeingDragged=treeElement;this._domModel.hideDOMNodeHighlight();return true;},_ondragover:function(event)
  531. {if(!this._treeElementBeingDragged)
  532. return false;var treeElement=this._treeElementFromEvent(event);if(!this._isValidDragSourceOrTarget(treeElement))
  533. return false;var node=treeElement.node();while(node){if(node===this._treeElementBeingDragged._node)
  534. return false;node=node.parentNode;}
  535. treeElement.updateSelection();treeElement.listItemElement.classList.add("elements-drag-over");this._dragOverTreeElement=treeElement;event.preventDefault();event.dataTransfer.dropEffect='move';return false;},_ondragleave:function(event)
  536. {this._clearDragOverTreeElementMarker();event.preventDefault();return false;},_isValidDragSourceOrTarget:function(treeElement)
  537. {if(!treeElement)
  538. return false;if(!(treeElement instanceof WebInspector.ElementsTreeElement))
  539. return false;var elementsTreeElement=(treeElement);var node=elementsTreeElement.node();if(!node.parentNode||node.parentNode.nodeType()!==Node.ELEMENT_NODE)
  540. return false;return true;},_ondrop:function(event)
  541. {event.preventDefault();var treeElement=this._treeElementFromEvent(event);if(treeElement)
  542. this._doMove(treeElement);},_doMove:function(treeElement)
  543. {if(!this._treeElementBeingDragged)
  544. return;var parentNode;var anchorNode;if(treeElement.isClosingTag()){parentNode=treeElement.node();}else{var dragTargetNode=treeElement.node();parentNode=dragTargetNode.parentNode;anchorNode=dragTargetNode;}
  545. var wasExpanded=this._treeElementBeingDragged.expanded;this._treeElementBeingDragged._node.moveTo(parentNode,anchorNode,this.selectNodeAfterEdit.bind(this,wasExpanded));delete this._treeElementBeingDragged;},_ondragend:function(event)
  546. {event.preventDefault();this._clearDragOverTreeElementMarker();delete this._treeElementBeingDragged;},_clearDragOverTreeElementMarker:function()
  547. {if(this._dragOverTreeElement){this._dragOverTreeElement.updateSelection();this._dragOverTreeElement.listItemElement.classList.remove("elements-drag-over");delete this._dragOverTreeElement;}},_onkeydown:function(event)
  548. {var keyboardEvent=(event);var node=(this.selectedDOMNode());console.assert(node);var treeElement=this.getCachedTreeElement(node);if(!treeElement)
  549. return;if(!treeElement.isEditing()&&WebInspector.KeyboardShortcut.hasNoModifiers(keyboardEvent)&&keyboardEvent.keyCode===WebInspector.KeyboardShortcut.Keys.H.code){this._toggleHideShortcut(node);event.consume(true);return;}},_contextMenuEventFired:function(event)
  550. {var treeElement=this._treeElementFromEvent(event);if(!treeElement||WebInspector.isEditing())
  551. return;var contextMenu=new WebInspector.ContextMenu(event);var isPseudoElement=!!treeElement.node().pseudoType();var isTag=treeElement.node().nodeType()===Node.ELEMENT_NODE&&!isPseudoElement;var textNode=event.target.enclosingNodeOrSelfWithClass("webkit-html-text-node");if(textNode&&textNode.classList.contains("bogus"))
  552. textNode=null;var commentNode=event.target.enclosingNodeOrSelfWithClass("webkit-html-comment");contextMenu.appendApplicableItems(event.target);if(textNode){contextMenu.appendSeparator();treeElement.populateTextContextMenu(contextMenu,textNode);}else if(isTag){contextMenu.appendSeparator();treeElement.populateTagContextMenu(contextMenu,event);}else if(commentNode){contextMenu.appendSeparator();treeElement.populateNodeContextMenu(contextMenu);}else if(isPseudoElement){treeElement.populateScrollIntoView(contextMenu);}
  553. contextMenu.appendApplicableItems(treeElement.node());contextMenu.show();},populateTreeElement:function(treeElement)
  554. {if(this._elementsTreeUpdater)
  555. this._elementsTreeUpdater._populateTreeElement(treeElement);},runPendingUpdates:function()
  556. {if(this._elementsTreeUpdater)
  557. this._elementsTreeUpdater._updateModifiedNodes();},handleShortcut:function(event)
  558. {var node=this.selectedDOMNode();var treeElement=this.getCachedTreeElement(node);if(!node||!treeElement)
  559. return;if(event.keyIdentifier==="F2"&&treeElement.hasEditableNode()){this._toggleEditAsHTML(node);event.handled=true;return;}
  560. if(WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(event)&&node.parentNode){if(event.keyIdentifier==="Up"&&node.previousSibling){node.moveTo(node.parentNode,node.previousSibling,this.selectNodeAfterEdit.bind(this,treeElement.expanded));event.handled=true;return;}
  561. if(event.keyIdentifier==="Down"&&node.nextSibling){node.moveTo(node.parentNode,node.nextSibling.nextSibling,this.selectNodeAfterEdit.bind(this,treeElement.expanded));event.handled=true;return;}}},_toggleEditAsHTML:function(node)
  562. {var treeElement=this.getCachedTreeElement(node);if(!treeElement)
  563. return;if(node.pseudoType())
  564. return;var parentNode=node.parentNode;var index=node.index;var wasExpanded=treeElement.expanded;treeElement.toggleEditAsHTML(editingFinished.bind(this));function editingFinished(success)
  565. {if(!success)
  566. return;this.runPendingUpdates();var newNode=parentNode?parentNode.children()[index]||parentNode:null;if(!newNode)
  567. return;this.selectDOMNode(newNode,true);if(wasExpanded){var newTreeItem=this.findTreeElement(newNode);if(newTreeItem)
  568. newTreeItem.expand();}}},selectNodeAfterEdit:function(wasExpanded,error,nodeId)
  569. {if(error)
  570. return null;this.runPendingUpdates();var newNode=nodeId?this._domModel.nodeForId(nodeId):null;if(!newNode)
  571. return null;this.selectDOMNode(newNode,true);var newTreeItem=this.findTreeElement(newNode);if(wasExpanded){if(newTreeItem)
  572. newTreeItem.expand();}
  573. return newTreeItem;},_toggleHideShortcut:function(node,userCallback)
  574. {var pseudoType=node.pseudoType();var effectiveNode=pseudoType?node.parentNode:node;if(!effectiveNode)
  575. return;function resolvedNode(object)
  576. {if(!object)
  577. return;function toggleClassAndInjectStyleRule(pseudoType)
  578. {const classNamePrefix="__web-inspector-hide";const classNameSuffix="-shortcut__";const styleTagId="__web-inspector-hide-shortcut-style__";var selectors=[];selectors.push("html /deep/ .__web-inspector-hide-shortcut__");selectors.push("html /deep/ .__web-inspector-hide-shortcut__ /deep/ *");selectors.push("html /deep/ .__web-inspector-hidebefore-shortcut__::before");selectors.push("html /deep/ .__web-inspector-hideafter-shortcut__::after");var selector=selectors.join(", ");var ruleBody="    visibility: hidden !important;";var rule="\n"+selector+"\n{\n"+ruleBody+"\n}\n";var className=classNamePrefix+(pseudoType||"")+classNameSuffix;this.classList.toggle(className);var style=document.head.querySelector("style#"+styleTagId);if(style)
  579. return;style=document.createElement("style");style.id=styleTagId;style.type="text/css";style.textContent=rule;document.head.appendChild(style);}
  580. object.callFunction(toggleClassAndInjectStyleRule,[{value:pseudoType}],userCallback);object.release();}
  581. effectiveNode.resolveToObject("",resolvedNode);},__proto__:TreeOutline.prototype}
  582. WebInspector.ElementsTreeOutline.ElementDecorator=function()
  583. {}
  584. WebInspector.ElementsTreeOutline.ElementDecorator.prototype={decorate:function(node)
  585. {},decorateAncestor:function(node)
  586. {}}
  587. WebInspector.ElementsTreeOutline.PseudoStateDecorator=function()
  588. {WebInspector.ElementsTreeOutline.ElementDecorator.call(this);}
  589. WebInspector.ElementsTreeOutline.PseudoStateDecorator.prototype={decorate:function(node)
  590. {if(node.nodeType()!==Node.ELEMENT_NODE)
  591. return null;var propertyValue=node.getUserProperty(WebInspector.CSSStyleModel.PseudoStatePropertyName);if(!propertyValue)
  592. return null;return WebInspector.UIString("Element state: %s",":"+propertyValue.join(", :"));},decorateAncestor:function(node)
  593. {if(node.nodeType()!==Node.ELEMENT_NODE)
  594. return null;var descendantCount=node.descendantUserPropertyCount(WebInspector.CSSStyleModel.PseudoStatePropertyName);if(!descendantCount)
  595. return null;if(descendantCount===1)
  596. return WebInspector.UIString("%d descendant with forced state",descendantCount);return WebInspector.UIString("%d descendants with forced state",descendantCount);}}
  597. WebInspector.ElementsTreeUpdater=function(domModel,treeOutline)
  598. {this._domModel=domModel;this._treeOutline=treeOutline;this._recentlyModifiedNodes=new Set();this._recentlyModifiedParentNodes=new Set();this._updateInfos=new Map();this._treeElementsBeingUpdated=new Set();}
  599. WebInspector.ElementsTreeUpdater.prototype={_addDOMModelListeners:function()
  600. {this._domModel.addEventListener(WebInspector.DOMModel.Events.NodeInserted,this._nodeInserted,this);this._domModel.addEventListener(WebInspector.DOMModel.Events.NodeRemoved,this._nodeRemoved,this);this._domModel.addEventListener(WebInspector.DOMModel.Events.AttrModified,this._attributeModified,this);this._domModel.addEventListener(WebInspector.DOMModel.Events.AttrRemoved,this._attributeRemoved,this);this._domModel.addEventListener(WebInspector.DOMModel.Events.CharacterDataModified,this._characterDataModified,this);this._domModel.addEventListener(WebInspector.DOMModel.Events.DocumentUpdated,this._documentUpdated,this);this._domModel.addEventListener(WebInspector.DOMModel.Events.ChildNodeCountUpdated,this._childNodeCountUpdated,this);this._domModel.addEventListener(WebInspector.DOMModel.Events.DistributedNodesChanged,this._distributedNodesChanged,this);},_removeDOMModelListeners:function()
  601. {this._domModel.removeEventListener(WebInspector.DOMModel.Events.NodeInserted,this._nodeInserted,this);this._domModel.removeEventListener(WebInspector.DOMModel.Events.NodeRemoved,this._nodeRemoved,this);this._domModel.removeEventListener(WebInspector.DOMModel.Events.AttrModified,this._attributeModified,this);this._domModel.removeEventListener(WebInspector.DOMModel.Events.AttrRemoved,this._attributeRemoved,this);this._domModel.removeEventListener(WebInspector.DOMModel.Events.CharacterDataModified,this._characterDataModified,this);this._domModel.removeEventListener(WebInspector.DOMModel.Events.DocumentUpdated,this._documentUpdated,this);this._domModel.removeEventListener(WebInspector.DOMModel.Events.ChildNodeCountUpdated,this._childNodeCountUpdated,this);this._domModel.removeEventListener(WebInspector.DOMModel.Events.DistributedNodesChanged,this._distributedNodesChanged,this);},_distributedNodesChanged:function(event)
  602. {var shadowHost=(event.data);var shadowHostDisplayMode=this._treeOutline._shadowHostDisplayModes.get(shadowHost);if(!shadowHostDisplayMode)
  603. return;var insertionPoints=shadowHost.insertionPoints();var shadowRoots=shadowHost.shadowRoots();this._parentNodeModified(shadowHost);for(var shadowRoot of shadowRoots){if(shadowHostDisplayMode===WebInspector.ElementsTreeOutline.ShadowHostDisplayMode.Composed)
  604. this._parentNodeModified(shadowRoot);}
  605. for(var insertionPoint of insertionPoints){if(shadowHostDisplayMode===WebInspector.ElementsTreeOutline.ShadowHostDisplayMode.Flattened)
  606. this._parentNodeModified(insertionPoint.parentNode);else
  607. this._parentNodeModified(insertionPoint);}
  608. this._updateModifiedNodesSoon();},_updateRecord:function(node)
  609. {if(!WebInspector.settings.highlightDOMUpdates.get()||this._domUpdateHighlightsMuted)
  610. return new WebInspector.ElementsTreeUpdater.UpdateInfo();var record=this._updateInfos.get(node);if(!record){record=new WebInspector.ElementsTreeUpdater.UpdateInfo();this._updateInfos.set(node,record);}
  611. return record;},_updateInfo:function(node)
  612. {if(!WebInspector.settings.highlightDOMUpdates.get())
  613. return null;return this._updateInfos.get(node)||null;},_parentNodeModified:function(parentNode)
  614. {if(!parentNode)
  615. return new WebInspector.ElementsTreeUpdater.UpdateInfo();this._recentlyModifiedParentNodes.add(parentNode);var treeElement=this._treeOutline.findTreeElement(parentNode);if(treeElement){var oldDisplayMode=treeElement.childrenDisplayMode();this._updateChildrenDisplayMode(treeElement);if(treeElement.childrenDisplayMode()!==oldDisplayMode){this._nodeModified(parentNode);this._updateRecord(parentNode).childrenModified();}}
  616. return this._updateRecord(parentNode);},_nodeModified:function(node)
  617. {this._recentlyModifiedNodes.add(node);return this._updateRecord(node);},_documentUpdated:function(event)
  618. {var inspectedRootDocument=event.data;this._reset();if(!inspectedRootDocument)
  619. return;this._treeOutline.rootDOMNode=inspectedRootDocument;},_attributeModified:function(event)
  620. {var node=(event.data.node);this._nodeModified(node).attributeModified(event.data.name);this._updateModifiedNodesSoon();},_attributeRemoved:function(event)
  621. {var node=(event.data.node);this._nodeModified(node).attributeRemoved(event.data.name);this._updateModifiedNodesSoon();},_characterDataModified:function(event)
  622. {var node=(event.data);this._parentNodeModified(node.parentNode).charDataModified();this._nodeModified(node).charDataModified();this._updateModifiedNodesSoon();},_nodeInserted:function(event)
  623. {var node=(event.data);this._parentNodeModified(node.parentNode).nodeInserted(node);this._updateModifiedNodesSoon();},_nodeRemoved:function(event)
  624. {var node=(event.data.node);var parentNode=(event.data.parent);this._treeOutline.resetClipboardIfNeeded(node);this._parentNodeModified(parentNode).childrenModified();this._updateModifiedNodesSoon();},_childNodeCountUpdated:function(event)
  625. {var node=(event.data);this._parentNodeModified(node);this._updateModifiedNodesSoon();},_setUpdateInfos:function()
  626. {for(var node of this._updateInfos.keys()){var treeElement=this._treeOutline.getCachedTreeElement(node);if(treeElement)
  627. treeElement.setUpdateInfo(this._updateInfo(node));}},_clearUpdateInfos:function()
  628. {for(var node of this._updateInfos.keys()){var treeElement=this._treeOutline.getCachedTreeElement(node);if(treeElement)
  629. treeElement.setUpdateInfo(null);}
  630. this._updateInfos.clear();},_updateModifiedNodesSoon:function()
  631. {if(!this._recentlyModifiedNodes.size&&!this._recentlyModifiedParentNodes.size)
  632. return;if(!this._treeOutline._visible){this._updateInfos.clear();return;}
  633. if(this._updateModifiedNodesTimeout)
  634. return;this._updateModifiedNodesTimeout=setTimeout(this._updateModifiedNodes.bind(this),50);},_updateModifiedNodes:function()
  635. {if(this._updateModifiedNodesTimeout){clearTimeout(this._updateModifiedNodesTimeout);delete this._updateModifiedNodesTimeout;}
  636. this._setUpdateInfos();var updatedNodes=new Set();for(var node of this._recentlyModifiedNodes)
  637. updatedNodes.add(node);for(var node of this._recentlyModifiedParentNodes)
  638. updatedNodes.add(node);var hidePanelWhileUpdating=updatedNodes.length>10;if(hidePanelWhileUpdating){var treeOutlineContainerElement=this._treeOutline.element.parentNode;var originalScrollTop=treeOutlineContainerElement?treeOutlineContainerElement.scrollTop:0;this._treeOutline._element.classList.add("hidden");}
  639. if(this._treeOutline._rootDOMNode&&this._recentlyModifiedParentNodes.has(this._treeOutline._rootDOMNode)){this._treeOutline.update();}else{for(var node of this._recentlyModifiedNodes){var nodeItem=this._treeOutline.findTreeElement(node);if(nodeItem)
  640. nodeItem.updateTitle(false);}
  641. for(var node of this._recentlyModifiedParentNodes){var parentNodeItem=this._treeOutline.findTreeElement(node);if(parentNodeItem&&parentNodeItem.populated)
  642. this.updateChildren(parentNodeItem);}}
  643. if(hidePanelWhileUpdating){this._treeOutline._element.classList.remove("hidden");if(originalScrollTop)
  644. treeOutlineContainerElement.scrollTop=originalScrollTop;this._treeOutline.updateSelection();}
  645. this._clearUpdateInfos();this._recentlyModifiedNodes.clear();this._recentlyModifiedParentNodes.clear();this._treeOutline._fireElementsTreeUpdated(updatedNodes.valuesArray());},_reset:function()
  646. {this._treeOutline.rootDOMNode=null;this._treeOutline.selectDOMNode(null,false);this._domModel.hideDOMNodeHighlight();this._recentlyModifiedNodes.clear();this._recentlyModifiedParentNodes.clear();this._updateInfos.clear();delete this._treeOutline._clipboardNodeData;},_populateTreeElement:function(treeElement)
  647. {if(treeElement.children.length||!treeElement.hasChildren)
  648. return;this.updateChildren(treeElement);},_createElementTreeElement:function(node,closingTag)
  649. {var treeElement=new WebInspector.ElementsTreeElement(node,closingTag);treeElement.selectable=this._treeOutline._selectEnabled;if(!closingTag)
  650. treeElement.setUpdateInfo(this._updateInfo(node));this._updateChildrenDisplayMode(treeElement);return treeElement;},_showChild:function(treeElement,child)
  651. {if(treeElement.isClosingTag())
  652. return null;var index=this._visibleChildren(treeElement.node()).indexOf(child);if(index===-1)
  653. return null;if(index>=treeElement.expandedChildrenLimit())
  654. this.setExpandedChildrenLimit(treeElement,index+1);if(treeElement.shadowHostToolbarElement)
  655. ++index;return(treeElement.children[index]);},_visibleShadowRoots:function(node)
  656. {var roots=node.shadowRoots();if(roots.length&&!WebInspector.settings.showUAShadowDOM.get()){roots=roots.filter(function(root){return root.shadowRootType()===WebInspector.DOMNode.ShadowRootTypes.Author;});}
  657. return roots;},_isShadowHostInComposedMode:function(node)
  658. {var shadowRoots=this._visibleShadowRoots(node);return this._treeOutline._shadowHostDisplayModes.has(node)&&!!shadowRoots.length;},_isInsertionPointInComposedMode:function(node)
  659. {var ancestorShadowHost=node.ancestorShadowHost();var isInShadowTreeInComposedMode=!!ancestorShadowHost&&this._treeOutline._shadowHostDisplayModes.has(ancestorShadowHost);return isInShadowTreeInComposedMode&&node.isInsertionPoint();},_shouldFlatten:function(node)
  660. {var ancestorShadowHost=node.ancestorShadowHost();if(!ancestorShadowHost)
  661. return false;if(this._treeOutline._shadowHostDisplayModes.get(ancestorShadowHost)!==WebInspector.ElementsTreeOutline.ShadowHostDisplayMode.Flattened)
  662. return false;return node.isShadowRoot()||node.isInsertionPoint();},_visibleChildren:function(node)
  663. {var result=[];var unflattenedChildren=this._unflattenedChildren(node);for(var child of unflattenedChildren){if(this._shouldFlatten(child)){var flattenedChildren=this._visibleChildren(child);result=result.concat(flattenedChildren);}else{result.push(child);}}
  664. return result;},_unflattenedChildren:function(node)
  665. {if(this._isShadowHostInComposedMode(node))
  666. return this._visibleChildrenForShadowHostInComposedMode(node);if(this._isInsertionPointInComposedMode(node))
  667. return this._visibleChildrenForInsertionPointInComposedMode(node);var visibleChildren=this._visibleShadowRoots(node);if(node.importedDocument())
  668. visibleChildren.push(node.importedDocument());if(node.templateContent())
  669. visibleChildren.push(node.templateContent());var beforePseudoElement=node.beforePseudoElement();if(beforePseudoElement)
  670. visibleChildren.push(beforePseudoElement);if(node.childNodeCount())
  671. visibleChildren=visibleChildren.concat(node.children());var afterPseudoElement=node.afterPseudoElement();if(afterPseudoElement)
  672. visibleChildren.push(afterPseudoElement);return visibleChildren;},_hasVisibleChildren:function(node)
  673. {if(this._isShadowHostInComposedMode(node))
  674. return this._hasVisibleChildrenAsShadowHostInComposedMode(node);if(this._isInsertionPointInComposedMode(node))
  675. return this._hasVisibleChildrenAsInsertionPointInComposedMode(node);if(node.importedDocument())
  676. return true;if(node.templateContent())
  677. return true;if(node.childNodeCount())
  678. return true;if(this._visibleShadowRoots(node).length)
  679. return true;if(node.hasPseudoElements())
  680. return true;return false;},_visibleChildrenForShadowHostInComposedMode:function(node)
  681. {var visibleChildren=[];var pseudoElements=node.pseudoElements();if(pseudoElements[WebInspector.DOMNode.PseudoElementNames.Before])
  682. visibleChildren.push(pseudoElements[WebInspector.DOMNode.PseudoElementNames.Before]);var shadowRoots=this._visibleShadowRoots(node);if(shadowRoots.length)
  683. visibleChildren.push(shadowRoots[0]);if(pseudoElements[WebInspector.DOMNode.PseudoElementNames.After])
  684. visibleChildren.push(pseudoElements[WebInspector.DOMNode.PseudoElementNames.After]);return visibleChildren;},_hasVisibleChildrenAsShadowHostInComposedMode:function(node)
  685. {if(this._visibleShadowRoots(node).length)
  686. return true;if(node.hasPseudoElements())
  687. return true;return false;},_visibleChildrenForInsertionPointInComposedMode:function(node)
  688. {var visibleChildren=[];var pseudoElements=node.pseudoElements();if(pseudoElements[WebInspector.DOMNode.PseudoElementNames.Before])
  689. visibleChildren.push(pseudoElements[WebInspector.DOMNode.PseudoElementNames.Before]);var distributedShadowRoot=node.distributedShadowRoot();if(distributedShadowRoot){visibleChildren.push(distributedShadowRoot)}else{var distributedNodes=node.distributedNodes();if(distributedNodes)
  690. visibleChildren=visibleChildren.concat(distributedNodes);}
  691. if(pseudoElements[WebInspector.DOMNode.PseudoElementNames.After])
  692. visibleChildren.push(pseudoElements[WebInspector.DOMNode.PseudoElementNames.After]);return visibleChildren;},_hasVisibleChildrenAsInsertionPointInComposedMode:function(node)
  693. {if(node.hasPseudoElements())
  694. return true;var distributedShadowRoot=node.distributedShadowRoot();if(distributedShadowRoot)
  695. return true;var distributedNodes=node.distributedNodes();if(distributedNodes&&distributedNodes.length)
  696. return true;return false;},_canShowInlineText:function(treeElement)
  697. {var node=treeElement.node();if(node.importedDocument()||node.templateContent()||this._visibleShadowRoots(node).length>0||node.hasPseudoElements())
  698. return false;if(node.nodeType()!==Node.ELEMENT_NODE)
  699. return false;if(!node.firstChild||node.firstChild!==node.lastChild||node.firstChild.nodeType()!==Node.TEXT_NODE)
  700. return false;var textChild=node.firstChild;var maxInlineTextChildLength=80;if(textChild.nodeValue().length<maxInlineTextChildLength)
  701. return true;return false;},_updateChildrenDisplayMode:function(treeElement)
  702. {var node=treeElement.node();var showInlineText=this._canShowInlineText(treeElement);var hasChildren=!treeElement.isClosingTag()&&this._hasVisibleChildren(node);var childrenDisplayMode;if(showInlineText)
  703. childrenDisplayMode=WebInspector.ElementsTreeElement.ChildrenDisplayMode.InlineText;else if(hasChildren)
  704. childrenDisplayMode=WebInspector.ElementsTreeElement.ChildrenDisplayMode.HasChildren;else
  705. childrenDisplayMode=WebInspector.ElementsTreeElement.ChildrenDisplayMode.NoChildren;treeElement.setChildrenDisplayMode(childrenDisplayMode);treeElement.setHasChildren(childrenDisplayMode===WebInspector.ElementsTreeElement.ChildrenDisplayMode.HasChildren);},_createExpandAllButtonTreeElement:function(treeElement)
  706. {var button=createTextButton("",handleLoadAllChildren.bind(this));button.value="";var expandAllButtonElement=new TreeElement(button,null,false);expandAllButtonElement.selectable=false;expandAllButtonElement.expandAllButton=true;expandAllButtonElement.button=button;return expandAllButtonElement;function handleLoadAllChildren(event)
  707. {var visibleChildCount=this._visibleChildren(treeElement.node()).length;this.setExpandedChildrenLimit(treeElement,Math.max(visibleChildCount,treeElement.expandedChildrenLimit()+WebInspector.ElementsTreeElement.InitialChildrenLimit));event.consume();}},setExpandedChildrenLimit:function(treeElement,expandedChildrenLimit)
  708. {if(treeElement.expandedChildrenLimit()===expandedChildrenLimit)
  709. return;treeElement.setExpandedChildrenLimit(expandedChildrenLimit);if(treeElement.treeOutline&&!this._treeElementsBeingUpdated.has(treeElement))
  710. this._updateChildren(treeElement);},updateChildren:function(treeElement)
  711. {if(!treeElement.hasChildren)
  712. return;console.assert(!treeElement.isClosingTag());var barrier=new CallbackBarrier();treeElement.node().getChildNodes(childNodesLoaded.bind(null,barrier.createCallback()));var ancestorShadowHost=treeElement.node().ancestorShadowHost();var shouldLoadDistributedNodes=ancestorShadowHost&&this._treeOutline._shadowHostDisplayModes.has(ancestorShadowHost);if(shouldLoadDistributedNodes)
  713. treeElement.node().ensureShadowHostDistributedNodesLoaded(barrier.createCallback());barrier.callWhenDone(this._updateChildren.bind(this,treeElement));function childNodesLoaded(callback,children)
  714. {if(!children)
  715. return;callback();}},insertChildElement:function(treeElement,child,index,closingTag)
  716. {var newElement=this._createElementTreeElement(child,closingTag);treeElement.insertChild(newElement,index);return newElement;},moveChild:function(treeElement,child,targetIndex)
  717. {var wasSelected=child.selected;treeElement.removeChild(child);treeElement.insertChild(child,targetIndex);if(wasSelected)
  718. child.select();},_updateChildren:function(treeElement)
  719. {if(this._treeElementsBeingUpdated.has(treeElement)||!this._treeOutline._visible)
  720. return;var node=treeElement.node();this._treeElementsBeingUpdated.add(treeElement);var selectedTreeElement=treeElement.treeOutline.selectedTreeElement;var visibleChildren=this._visibleChildren(treeElement.node());var visibleChildrenSet=new Set(visibleChildren);var existingTreeElements=new Map();for(var i=treeElement.children.length-1;i>=0;--i){var existingTreeElement=treeElement.children[i];if(!(existingTreeElement instanceof WebInspector.ElementsTreeElement)){treeElement.removeChildAtIndex(i);continue;}
  721. var elementsTreeElement=(existingTreeElement);var existingNode=elementsTreeElement.node();if(visibleChildrenSet.has(existingNode)){existingTreeElements.set(existingNode,existingTreeElement);continue;}
  722. if(selectedTreeElement&&(selectedTreeElement===existingTreeElement||selectedTreeElement.hasAncestor(existingTreeElement))){if(existingTreeElement.nextSibling)
  723. selectedTreeElement=existingTreeElement.nextSibling;else if(existingTreeElement.previousSibling)
  724. selectedTreeElement=existingTreeElement.previousSibling;else
  725. selectedTreeElement=treeElement;}
  726. treeElement.removeChildAtIndex(i);}
  727. if(selectedTreeElement!==treeElement.treeOutline.selectedTreeElement)
  728. selectedTreeElement.select();for(var i=0;i<visibleChildren.length&&i<treeElement.expandedChildrenLimit();++i){var child=visibleChildren[i];if(existingTreeElements.has(child)){this.moveChild(treeElement,existingTreeElements.get(child),i);}else{var newElement=this.insertChildElement(treeElement,child,i);if(this._updateInfo(treeElement.node()))
  729. WebInspector.ElementsTreeElement.animateOnDOMUpdate(newElement);if(treeElement.children.length>treeElement.expandedChildrenLimit())
  730. this.setExpandedChildrenLimit(treeElement,treeElement.expandedChildrenLimit()+1);}}
  731. treeElement.updateTitle();var expandedChildCount=treeElement.children.length;if(visibleChildren.length>expandedChildCount){var targetButtonIndex=expandedChildCount;if(!treeElement.expandAllButtonElement)
  732. treeElement.expandAllButtonElement=this._createExpandAllButtonTreeElement(treeElement);treeElement.insertChild(treeElement.expandAllButtonElement,targetButtonIndex);treeElement.expandAllButtonElement.button.textContent=WebInspector.UIString("Show All Nodes (%d More)",visibleChildren.length-expandedChildCount);}else if(treeElement.expandAllButtonElement){delete treeElement.expandAllButtonElement;}
  733. if(node.nodeType()===Node.ELEMENT_NODE&&treeElement.hasChildren)
  734. this.insertChildElement(treeElement,node,treeElement.children.length,true);if(Runtime.experiments.isEnabled("composedShadowDOM")&&node.shadowRoots().length){if(!treeElement.shadowHostToolbarElement)
  735. treeElement.shadowHostToolbarElement=this._createShadowHostToolbar(treeElement);treeElement.insertChild(treeElement.shadowHostToolbarElement,0);}else if(treeElement.shadowHostToolbarElement){delete treeElement.shadowHostToolbarElement;}
  736. this._treeElementsBeingUpdated.delete(treeElement)},_setShadowHostDisplayMode:function(elementsTreeElement,newMode)
  737. {var node=elementsTreeElement.node();var oldMode=this._treeOutline._shadowHostDisplayModes.has(node);if(newMode)
  738. this._treeOutline._shadowHostDisplayModes.set(node,newMode);else
  739. this._treeOutline._shadowHostDisplayModes.delete(node);if(elementsTreeElement.populated)
  740. node.ensureShadowHostDistributedNodesLoaded(invalidateChildren.bind(this));else
  741. invalidateChildren.call(this);function invalidateChildren()
  742. {this._domUpdateHighlightsMuted=true;this._parentNodeModified(node);for(var shadowRoot of node.shadowRoots())
  743. this._parentNodeModified(shadowRoot);for(var insertionPoint of node.insertionPoints())
  744. this._parentNodeModified(insertionPoint);delete this._domUpdateHighlightsMuted;this._updateModifiedNodes();if(newMode===WebInspector.ElementsTreeOutline.ShadowHostDisplayMode.Composed){for(var shadowRoot of node.shadowRoots()){var treeElement=this._treeOutline.findTreeElement(shadowRoot);if(treeElement)
  745. treeElement.expand();}
  746. for(var insertionPoint of node.insertionPoints()){var treeElement=this._treeOutline.findTreeElement(insertionPoint);if(treeElement)
  747. treeElement.expand();}}}
  748. elementsTreeElement.shadowHostToolbarElement.updateButtons(newMode);},_createShadowHostToolbar:function(elementsTreeElement)
  749. {function createButton(label,tooltip,mode)
  750. {var button=createElement("button");button.className="shadow-host-display-mode-toolbar-button";button.textContent=label;button.title=tooltip;button.mode=mode;if(mode)
  751. button.classList.add("custom-mode")
  752. button.addEventListener("click",buttonClicked.bind(this));toolbar.appendChild(button);return button;}
  753. function updateButtons(mode)
  754. {for(var i=0;i<buttons.length;++i){var currentModeButton=mode===buttons[i].mode;buttons[i].classList.toggle("toggled",currentModeButton);buttons[i].disabled=currentModeButton;}}
  755. function buttonClicked(event)
  756. {var button=event.target;if(button.disabled)
  757. return;this._setShadowHostDisplayMode(elementsTreeElement,button.mode);event.consume();}
  758. var node=elementsTreeElement.node();var toolbar=createElementWithClass("div","shadow-host-display-mode-toolbar");var toolbarTreeElement=new TreeElement(toolbar,null,false);var buttons=[];buttons.push(createButton.call(this,"Logical",WebInspector.UIString("Logical view \n(Light and Shadow DOM are shown separately)."),null));buttons.push(createButton.call(this,"Composed",WebInspector.UIString("Composed view\n(Light DOM is shown as distributed into Shadow DOM)."),WebInspector.ElementsTreeOutline.ShadowHostDisplayMode.Composed));buttons.push(createButton.call(this,"Flattened",WebInspector.UIString("Flattened view\n(Same as composed view, but shadow roots and insertion points are hidden)."),WebInspector.ElementsTreeOutline.ShadowHostDisplayMode.Flattened));updateButtons(this._treeOutline._shadowHostDisplayModes.get(node)||null);toolbarTreeElement.selectable=false;toolbarTreeElement.shadowHostToolbar=true;toolbarTreeElement.buttons=buttons;toolbarTreeElement.updateButtons=updateButtons;return toolbarTreeElement;},}
  759. WebInspector.ElementsTreeUpdater.UpdateInfo=function()
  760. {}
  761. WebInspector.ElementsTreeUpdater.UpdateInfo.prototype={attributeModified:function(attrName)
  762. {if(this._removedAttributes&&this._removedAttributes.has(attrName))
  763. this._removedAttributes.delete(attrName);if(!this._modifiedAttributes)
  764. this._modifiedAttributes=(new Set());this._modifiedAttributes.add(attrName);},attributeRemoved:function(attrName)
  765. {if(this._modifiedAttributes&&this._modifiedAttributes.has(attrName))
  766. this._modifiedAttributes.delete(attrName);if(!this._removedAttributes)
  767. this._removedAttributes=(new Set());this._removedAttributes.add(attrName);},nodeInserted:function(node)
  768. {if(!this._insertedNodes)
  769. this._insertedNodes=(new Set());this._insertedNodes.add((node));},charDataModified:function()
  770. {this._charDataModified=true;},childrenModified:function()
  771. {this._hasChangedChildren=true;},isAttributeModified:function(attributeName)
  772. {return this._modifiedAttributes&&this._modifiedAttributes.has(attributeName);},hasRemovedAttributes:function()
  773. {return!!this._removedAttributes&&!!this._removedAttributes.size;},hasInsertedNodes:function()
  774. {return!!this._insertedNodes&&!!this._insertedNodes.size;},isCharDataModified:function()
  775. {return!!this._charDataModified;},isNodeInserted:function(node)
  776. {return!!this._insertedNodes&&this._insertedNodes.has(node);},hasChangedChildren:function()
  777. {return!!this._hasChangedChildren;}}
  778. WebInspector.ElementsTreeOutline.Renderer=function()
  779. {}
  780. WebInspector.ElementsTreeOutline.Renderer.prototype={render:function(object)
  781. {return new Promise(renderPromise);function renderPromise(resolve,reject)
  782. {if(object instanceof WebInspector.DOMNode)
  783. onNodeResolved((object));else if(object instanceof WebInspector.DeferredDOMNode)
  784. ((object)).resolve(onNodeResolved);else if(object instanceof WebInspector.RemoteObject)
  785. ((object)).pushNodeToFrontend(onNodeResolved);else
  786. reject(new Error("Can't reveal not a node."));function onNodeResolved(node)
  787. {if(!node){reject(new Error("Could not resolve node."));return;}
  788. var treeOutline=new WebInspector.ElementsTreeOutline(node.target(),false,false);treeOutline.rootDOMNode=node;if(!treeOutline.children[0].hasChildren)
  789. treeOutline._element.classList.add("single-node");treeOutline.setVisible(true);treeOutline.element.treeElementForTest=treeOutline.children[0];resolve(treeOutline.element);}}}};WebInspector.EventListenersSidebarPane=function()
  790. {WebInspector.ElementsSidebarPane.call(this,WebInspector.UIString("Event Listeners"));this.bodyElement.classList.add("events-pane");this.sections=[];var refreshButton=this.titleElement.createChild("button","pane-title-button refresh");refreshButton.addEventListener("click",this.update.bind(this),false);refreshButton.title=WebInspector.UIString("Refresh");this.settingsSelectElement=this.titleElement.createChild("select","select-filter");var option=this.settingsSelectElement.createChild("option");option.value="all";option.label=WebInspector.UIString("All Nodes");option=this.settingsSelectElement.createChild("option");option.value="selected";option.label=WebInspector.UIString("Selected Node Only");var filter=WebInspector.settings.eventListenersFilter.get();if(filter==="all")
  791. this.settingsSelectElement[0].selected=true;else if(filter==="selected")
  792. this.settingsSelectElement[1].selected=true;this.settingsSelectElement.addEventListener("click",consumeEvent,false);this.settingsSelectElement.addEventListener("change",this._changeSetting.bind(this),false);this._linkifier=new WebInspector.Linkifier();}
  793. WebInspector.EventListenersSidebarPane._objectGroupName="event-listeners-sidebar-pane";WebInspector.EventListenersSidebarPane.prototype={doUpdate:function(finishCallback)
  794. {if(this._lastRequestedNode){this._lastRequestedNode.target().runtimeAgent().releaseObjectGroup(WebInspector.EventListenersSidebarPane._objectGroupName);delete this._lastRequestedNode;}
  795. this._linkifier.reset();var body=this.bodyElement;body.removeChildren();this.sections=[];var node=this.node();if(!node){finishCallback();return;}
  796. this._lastRequestedNode=node;node.eventListeners(WebInspector.EventListenersSidebarPane._objectGroupName,this._onEventListeners.bind(this,finishCallback));},_onEventListeners:function(finishCallback,eventListeners)
  797. {if(!eventListeners){finishCallback();return;}
  798. var body=this.bodyElement;var node=this.node();var selectedNodeOnly="selected"===WebInspector.settings.eventListenersFilter.get();var sectionNames=[];var sectionMap={};for(var i=0;i<eventListeners.length;++i){var eventListener=eventListeners[i];if(selectedNodeOnly&&(node.id!==eventListener.payload().nodeId))
  799. continue;if(/^function _inspectorCommandLineAPI_logEvent\(/.test(eventListener.payload().handlerBody.toString()))
  800. continue;var type=eventListener.payload().type;var section=sectionMap[type];if(!section){section=new WebInspector.EventListenersSection(type,node.id,this._linkifier);sectionMap[type]=section;sectionNames.push(type);this.sections.push(section);}
  801. section.addListener(eventListener);}
  802. if(sectionNames.length===0){body.createChild("div","info").textContent=WebInspector.UIString("No Event Listeners");}else{sectionNames.sort();for(var i=0;i<sectionNames.length;++i){var section=sectionMap[sectionNames[i]];body.appendChild(section.element);}}
  803. finishCallback();},_changeSetting:function()
  804. {var selectedOption=this.settingsSelectElement[this.settingsSelectElement.selectedIndex];WebInspector.settings.eventListenersFilter.set(selectedOption.value);this.update();},__proto__:WebInspector.ElementsSidebarPane.prototype}
  805. WebInspector.EventListenersSection=function(title,nodeId,linkifier)
  806. {this._nodeId=nodeId;this._linkifier=linkifier;WebInspector.Section.call(this,title);this.propertiesElement.remove();delete this.propertiesElement;delete this.propertiesTreeOutline;this._eventBars=this.element.createChild("div","event-bars");}
  807. WebInspector.EventListenersSection.prototype={addListener:function(eventListener)
  808. {var eventListenerBar=new WebInspector.EventListenerBar(eventListener,this._nodeId,this._linkifier);this._eventBars.appendChild(eventListenerBar.element);},__proto__:WebInspector.Section.prototype}
  809. WebInspector.EventListenerBar=function(eventListener,nodeId,linkifier)
  810. {var target=eventListener.target();WebInspector.ObjectPropertiesSection.call(this,target.runtimeModel.createRemoteObjectFromPrimitiveValue(""));this._runtimeModel=target.runtimeModel;this._eventListener=eventListener;this._nodeId=nodeId;this._setNodeTitle();this._setFunctionSubtitle(linkifier);this.editable=false;this.element.classList.add("event-bar");this.headerElement.classList.add("source-code");this.propertiesElement.classList.add("event-properties");}
  811. WebInspector.EventListenerBar.prototype={update:function()
  812. {function updateWithNodeObject(nodeObject)
  813. {var properties=[];var payload=this._eventListener.payload();properties.push(this._runtimeModel.createRemotePropertyFromPrimitiveValue("type",payload.type));properties.push(this._runtimeModel.createRemotePropertyFromPrimitiveValue("useCapture",payload.useCapture));properties.push(this._runtimeModel.createRemotePropertyFromPrimitiveValue("isAttribute",payload.isAttribute));if(nodeObject)
  814. properties.push(new WebInspector.RemoteObjectProperty("node",nodeObject));if(typeof payload.handler!=="undefined"){var remoteObject=this._runtimeModel.createRemoteObject(payload.handler);properties.push(new WebInspector.RemoteObjectProperty("handler",remoteObject));}
  815. properties.push(this._runtimeModel.createRemotePropertyFromPrimitiveValue("listenerBody",payload.handlerBody));if(payload.sourceName)
  816. properties.push(this._runtimeModel.createRemotePropertyFromPrimitiveValue("sourceName",payload.sourceName));properties.push(this._runtimeModel.createRemotePropertyFromPrimitiveValue("lineNumber",payload.location.lineNumber+1));this.updateProperties(properties);}
  817. this._eventListener.node().resolveToObject(WebInspector.EventListenersSidebarPane._objectGroupName,updateWithNodeObject.bind(this));},_setNodeTitle:function()
  818. {var node=this._eventListener.node();if(!node)
  819. return;if(node.nodeType()===Node.DOCUMENT_NODE){this.titleElement.textContent="document";return;}
  820. if(node.id===this._nodeId){this.titleElement.textContent=WebInspector.DOMPresentationUtils.simpleSelector(node);return;}
  821. this.titleElement.removeChildren();this.titleElement.appendChild(WebInspector.DOMPresentationUtils.linkifyNodeReference(node));},_setFunctionSubtitle:function(linkifier)
  822. {this.subtitleElement.removeChildren();var link=linkifier.linkifyRawLocation(this._eventListener.location(),this._eventListener.sourceName());this.subtitleElement.appendChild(link);},__proto__:WebInspector.ObjectPropertiesSection.prototype};WebInspector.MetricsSidebarPane=function()
  823. {WebInspector.ElementsSidebarPane.call(this,WebInspector.UIString("Metrics"));}
  824. WebInspector.MetricsSidebarPane.prototype={setNode:function(node)
  825. {WebInspector.ElementsSidebarPane.prototype.setNode.call(this,node);this._updateTarget(node.target());},_updateTarget:function(target)
  826. {if(this._target===target)
  827. return;if(this._target){this._target.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.StyleSheetAdded,this.update,this);this._target.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.StyleSheetRemoved,this.update,this);this._target.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.StyleSheetChanged,this.update,this);this._target.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.MediaQueryResultChanged,this.update,this);this._target.domModel.removeEventListener(WebInspector.DOMModel.Events.AttrModified,this._attributesUpdated,this);this._target.domModel.removeEventListener(WebInspector.DOMModel.Events.AttrRemoved,this._attributesUpdated,this);this._target.resourceTreeModel.removeEventListener(WebInspector.ResourceTreeModel.EventTypes.FrameResized,this.update,this);}
  828. this._target=target;this._target.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetAdded,this.update,this);this._target.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetRemoved,this.update,this);this._target.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetChanged,this.update,this);this._target.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.MediaQueryResultChanged,this.update,this);this._target.domModel.addEventListener(WebInspector.DOMModel.Events.AttrModified,this._attributesUpdated,this);this._target.domModel.addEventListener(WebInspector.DOMModel.Events.AttrRemoved,this._attributesUpdated,this);this._target.resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.FrameResized,this.update,this);},doUpdate:function(finishedCallback)
  829. {if(this._isEditingMetrics){finishedCallback();return;}
  830. var node=this.node();if(!node||node.nodeType()!==Node.ELEMENT_NODE){this.bodyElement.removeChildren();finishedCallback();return;}
  831. function callback(style)
  832. {if(!style||this.node()!==node)
  833. return;this._updateMetrics(style);}
  834. this._target.cssModel.getComputedStyleAsync(node.id,callback.bind(this));function inlineStyleCallback(style)
  835. {if(style&&this.node()===node)
  836. this.inlineStyle=style;finishedCallback();}
  837. this._target.cssModel.getInlineStylesAsync(node.id,inlineStyleCallback.bind(this));},_attributesUpdated:function(event)
  838. {if(this.node()!==event.data.node)
  839. return;this.update();},_getPropertyValueAsPx:function(style,propertyName)
  840. {return Number(style.getPropertyValue(propertyName).replace(/px$/,"")||0);},_getBox:function(computedStyle,componentName)
  841. {var suffix=componentName==="border"?"-width":"";var left=this._getPropertyValueAsPx(computedStyle,componentName+"-left"+suffix);var top=this._getPropertyValueAsPx(computedStyle,componentName+"-top"+suffix);var right=this._getPropertyValueAsPx(computedStyle,componentName+"-right"+suffix);var bottom=this._getPropertyValueAsPx(computedStyle,componentName+"-bottom"+suffix);return{left:left,top:top,right:right,bottom:bottom};},_highlightDOMNode:function(showHighlight,mode,event)
  842. {event.consume();if(showHighlight&&this.node()){if(this._highlightMode===mode)
  843. return;this._highlightMode=mode;this.node().highlight(mode);}else{delete this._highlightMode;this._target.domModel.hideDOMNodeHighlight();}
  844. for(var i=0;this._boxElements&&i<this._boxElements.length;++i){var element=this._boxElements[i];if(!this.node()||mode==="all"||element._name===mode)
  845. element.style.backgroundColor=element._backgroundColor;else
  846. element.style.backgroundColor="";}},_updateMetrics:function(style)
  847. {var metricsElement=createElement("div");metricsElement.className="metrics";var self=this;function createBoxPartElement(style,name,side,suffix)
  848. {var propertyName=(name!=="position"?name+"-":"")+side+suffix;var value=style.getPropertyValue(propertyName);if(value===""||(name!=="position"&&value==="0px"))
  849. value="\u2012";else if(name==="position"&&value==="auto")
  850. value="\u2012";value=value.replace(/px$/,"");value=Number.toFixedIfFloating(value);var element=createElement("div");element.className=side;element.textContent=value;element.addEventListener("dblclick",this.startEditing.bind(this,element,name,propertyName,style),false);return element;}
  851. function getContentAreaWidthPx(style)
  852. {var width=style.getPropertyValue("width").replace(/px$/,"");if(!isNaN(width)&&style.getPropertyValue("box-sizing")==="border-box"){var borderBox=self._getBox(style,"border");var paddingBox=self._getBox(style,"padding");width=width-borderBox.left-borderBox.right-paddingBox.left-paddingBox.right;}
  853. return Number.toFixedIfFloating(width);}
  854. function getContentAreaHeightPx(style)
  855. {var height=style.getPropertyValue("height").replace(/px$/,"");if(!isNaN(height)&&style.getPropertyValue("box-sizing")==="border-box"){var borderBox=self._getBox(style,"border");var paddingBox=self._getBox(style,"padding");height=height-borderBox.top-borderBox.bottom-paddingBox.top-paddingBox.bottom;}
  856. return Number.toFixedIfFloating(height);}
  857. var noMarginDisplayType={"table-cell":true,"table-column":true,"table-column-group":true,"table-footer-group":true,"table-header-group":true,"table-row":true,"table-row-group":true};var noPaddingDisplayType={"table-column":true,"table-column-group":true,"table-footer-group":true,"table-header-group":true,"table-row":true,"table-row-group":true};var noPositionType={"static":true};var boxes=["content","padding","border","margin","position"];var boxColors=[WebInspector.Color.PageHighlight.Content,WebInspector.Color.PageHighlight.Padding,WebInspector.Color.PageHighlight.Border,WebInspector.Color.PageHighlight.Margin,WebInspector.Color.fromRGBA([0,0,0,0])];var boxLabels=[WebInspector.UIString("content"),WebInspector.UIString("padding"),WebInspector.UIString("border"),WebInspector.UIString("margin"),WebInspector.UIString("position")];var previousBox=null;this._boxElements=[];for(var i=0;i<boxes.length;++i){var name=boxes[i];if(name==="margin"&&noMarginDisplayType[style.getPropertyValue("display")])
  858. continue;if(name==="padding"&&noPaddingDisplayType[style.getPropertyValue("display")])
  859. continue;if(name==="position"&&noPositionType[style.getPropertyValue("position")])
  860. continue;var boxElement=createElement("div");boxElement.className=name;boxElement._backgroundColor=boxColors[i].asString(WebInspector.Color.Format.RGBA);boxElement._name=name;boxElement.style.backgroundColor=boxElement._backgroundColor;boxElement.addEventListener("mouseover",this._highlightDOMNode.bind(this,true,name==="position"?"all":name),false);this._boxElements.push(boxElement);if(name==="content"){var widthElement=createElement("span");widthElement.textContent=getContentAreaWidthPx(style);widthElement.addEventListener("dblclick",this.startEditing.bind(this,widthElement,"width","width",style),false);var heightElement=createElement("span");heightElement.textContent=getContentAreaHeightPx(style);heightElement.addEventListener("dblclick",this.startEditing.bind(this,heightElement,"height","height",style),false);boxElement.appendChild(widthElement);boxElement.createTextChild(" \u00D7 ");boxElement.appendChild(heightElement);}else{var suffix=(name==="border"?"-width":"");var labelElement=createElement("div");labelElement.className="label";labelElement.textContent=boxLabels[i];boxElement.appendChild(labelElement);boxElement.appendChild(createBoxPartElement.call(this,style,name,"top",suffix));boxElement.appendChild(createElement("br"));boxElement.appendChild(createBoxPartElement.call(this,style,name,"left",suffix));if(previousBox)
  861. boxElement.appendChild(previousBox);boxElement.appendChild(createBoxPartElement.call(this,style,name,"right",suffix));boxElement.appendChild(createElement("br"));boxElement.appendChild(createBoxPartElement.call(this,style,name,"bottom",suffix));}
  862. previousBox=boxElement;}
  863. metricsElement.appendChild(previousBox);metricsElement.addEventListener("mouseover",this._highlightDOMNode.bind(this,false,"all"),false);this.bodyElement.removeChildren();this.bodyElement.appendChild(metricsElement);},startEditing:function(targetElement,box,styleProperty,computedStyle)
  864. {if(WebInspector.isBeingEdited(targetElement))
  865. return;var context={box:box,styleProperty:styleProperty,computedStyle:computedStyle};var boundKeyDown=this._handleKeyDown.bind(this,context,styleProperty);context.keyDownHandler=boundKeyDown;targetElement.addEventListener("keydown",boundKeyDown,false);this._isEditingMetrics=true;var config=new WebInspector.InplaceEditor.Config(this.editingCommitted.bind(this),this.editingCancelled.bind(this),context);WebInspector.InplaceEditor.startEditing(targetElement,config);targetElement.window().getSelection().setBaseAndExtent(targetElement,0,targetElement,1);},_handleKeyDown:function(context,styleProperty,event)
  866. {var element=event.currentTarget;function finishHandler(originalValue,replacementString)
  867. {this._applyUserInput(element,replacementString,originalValue,context,false);}
  868. function customNumberHandler(prefix,number,suffix)
  869. {if(styleProperty!=="margin"&&number<0)
  870. number=0;return prefix+number+suffix;}
  871. WebInspector.handleElementValueModifications(event,element,finishHandler.bind(this),undefined,customNumberHandler);},editingEnded:function(element,context)
  872. {delete this.originalPropertyData;delete this.previousPropertyDataCandidate;element.removeEventListener("keydown",context.keyDownHandler,false);delete this._isEditingMetrics;},editingCancelled:function(element,context)
  873. {if("originalPropertyData"in this&&this.inlineStyle){if(!this.originalPropertyData){var pastLastSourcePropertyIndex=this.inlineStyle.pastLastSourcePropertyIndex();if(pastLastSourcePropertyIndex)
  874. this.inlineStyle.allProperties[pastLastSourcePropertyIndex-1].setText("",false);}else
  875. this.inlineStyle.allProperties[this.originalPropertyData.index].setText(this.originalPropertyData.propertyText,false);}
  876. this.editingEnded(element,context);this.update();},_applyUserInput:function(element,userInput,previousContent,context,commitEditor)
  877. {if(!this.inlineStyle){return this.editingCancelled(element,context);}
  878. if(commitEditor&&userInput===previousContent)
  879. return this.editingCancelled(element,context);if(context.box!=="position"&&(!userInput||userInput==="\u2012"))
  880. userInput="0px";else if(context.box==="position"&&(!userInput||userInput==="\u2012"))
  881. userInput="auto";userInput=userInput.toLowerCase();if(/^\d+$/.test(userInput))
  882. userInput+="px";var styleProperty=context.styleProperty;var computedStyle=context.computedStyle;if(computedStyle.getPropertyValue("box-sizing")==="border-box"&&(styleProperty==="width"||styleProperty==="height")){if(!userInput.match(/px$/)){WebInspector.console.error("For elements with box-sizing: border-box, only absolute content area dimensions can be applied");return;}
  883. var borderBox=this._getBox(computedStyle,"border");var paddingBox=this._getBox(computedStyle,"padding");var userValuePx=Number(userInput.replace(/px$/,""));if(isNaN(userValuePx))
  884. return;if(styleProperty==="width")
  885. userValuePx+=borderBox.left+borderBox.right+paddingBox.left+paddingBox.right;else
  886. userValuePx+=borderBox.top+borderBox.bottom+paddingBox.top+paddingBox.bottom;userInput=userValuePx+"px";}
  887. this.previousPropertyDataCandidate=null;var allProperties=this.inlineStyle.allProperties;for(var i=0;i<allProperties.length;++i){var property=allProperties[i];if(property.name!==context.styleProperty||property.inactive)
  888. continue;this.previousPropertyDataCandidate=property;property.setValue(userInput,commitEditor,true,callback.bind(this));return;}
  889. this.inlineStyle.appendProperty(context.styleProperty,userInput,callback.bind(this));function callback(style)
  890. {if(!style)
  891. return;this.inlineStyle=style;if(!("originalPropertyData"in this))
  892. this.originalPropertyData=this.previousPropertyDataCandidate;if(typeof this._highlightMode!=="undefined")
  893. this._node.highlight(this._highlightMode);if(commitEditor)
  894. this.update();}},editingCommitted:function(element,userInput,previousContent,context)
  895. {this.editingEnded(element,context);this._applyUserInput(element,userInput,previousContent,context,true);},__proto__:WebInspector.ElementsSidebarPane.prototype};WebInspector.PlatformFontsSidebarPane=function()
  896. {WebInspector.ElementsSidebarPane.call(this,WebInspector.UIString("Fonts"));this.element.classList.add("platform-fonts");this._sectionTitle=createElementWithClass("div","sidebar-separator");this.element.insertBefore(this._sectionTitle,this.bodyElement);this._sectionTitle.textContent=WebInspector.UIString("Rendered Fonts");this._fontStatsSection=this.bodyElement.createChild("div","stats-section");}
  897. WebInspector.PlatformFontsSidebarPane.prototype={setNode:function(node)
  898. {WebInspector.ElementsSidebarPane.prototype.setNode.call(this,node);this._updateTarget(node.target());},_updateTarget:function(target)
  899. {if(this._target===target)
  900. return;if(this._target){this._target.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.StyleSheetAdded,this.update,this);this._target.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.StyleSheetRemoved,this.update,this);this._target.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.StyleSheetChanged,this.update,this);this._target.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.MediaQueryResultChanged,this.update,this);this._target.domModel.removeEventListener(WebInspector.DOMModel.Events.AttrModified,this.update,this);this._target.domModel.removeEventListener(WebInspector.DOMModel.Events.AttrRemoved,this.update,this);this._target.domModel.removeEventListener(WebInspector.DOMModel.Events.CharacterDataModified,this.update,this);}
  901. this._target=target;this._target.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetAdded,this.update,this);this._target.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetRemoved,this.update,this);this._target.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetChanged,this.update,this);this._target.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.MediaQueryResultChanged,this.update,this);this._target.domModel.addEventListener(WebInspector.DOMModel.Events.AttrModified,this.update,this);this._target.domModel.addEventListener(WebInspector.DOMModel.Events.AttrRemoved,this.update,this);this._target.domModel.addEventListener(WebInspector.DOMModel.Events.CharacterDataModified,this.update,this);},doUpdate:function(finishedCallback)
  902. {if(!this.node())
  903. return;this._target.cssModel.getPlatformFontsForNode(this.node().id,this._refreshUI.bind(this,(this.node()),finishedCallback));},_refreshUI:function(node,finishedCallback,cssFamilyName,platformFonts)
  904. {if(this.node()!==node){finishedCallback();return;}
  905. this._fontStatsSection.removeChildren();var isEmptySection=!platformFonts||!platformFonts.length;this._sectionTitle.classList.toggle("hidden",isEmptySection);if(isEmptySection){finishedCallback();return;}
  906. platformFonts.sort(function(a,b){return b.glyphCount-a.glyphCount;});for(var i=0;i<platformFonts.length;++i){var fontStatElement=this._fontStatsSection.createChild("div","font-stats-item");var fontNameElement=fontStatElement.createChild("span","font-name");fontNameElement.textContent=platformFonts[i].familyName;var fontDelimeterElement=fontStatElement.createChild("span","delimeter");fontDelimeterElement.textContent="\u2014";var fontUsageElement=fontStatElement.createChild("span","font-usage");var usage=platformFonts[i].glyphCount;fontUsageElement.textContent=usage===1?WebInspector.UIString("%d glyph",usage):WebInspector.UIString("%d glyphs",usage);}
  907. finishedCallback();},__proto__:WebInspector.ElementsSidebarPane.prototype};WebInspector.PropertiesSidebarPane=function()
  908. {WebInspector.ElementsSidebarPane.call(this,WebInspector.UIString("Properties"));WebInspector.targetManager.addModelListener(WebInspector.DOMModel,WebInspector.DOMModel.Events.AttrModified,this._onNodeChange,this);WebInspector.targetManager.addModelListener(WebInspector.DOMModel,WebInspector.DOMModel.Events.AttrRemoved,this._onNodeChange,this);WebInspector.targetManager.addModelListener(WebInspector.DOMModel,WebInspector.DOMModel.Events.CharacterDataModified,this._onNodeChange,this);WebInspector.targetManager.addModelListener(WebInspector.DOMModel,WebInspector.DOMModel.Events.ChildNodeCountUpdated,this._onNodeChange,this);}
  909. WebInspector.PropertiesSidebarPane._objectGroupName="properties-sidebar-pane";WebInspector.PropertiesSidebarPane.prototype={doUpdate:function(finishCallback)
  910. {if(this._lastRequestedNode){this._lastRequestedNode.target().runtimeAgent().releaseObjectGroup(WebInspector.PropertiesSidebarPane._objectGroupName);delete this._lastRequestedNode;}
  911. var node=this.node();if(!node){this.bodyElement.removeChildren();this.sections=[];finishCallback();return;}
  912. this._lastRequestedNode=node;node.resolveToObject(WebInspector.PropertiesSidebarPane._objectGroupName,nodeResolved.bind(this));function nodeResolved(object)
  913. {if(!object){finishCallback();return;}
  914. function protoList()
  915. {var proto=this;var result={__proto__:null};var counter=1;while(proto){result[counter++]=proto;proto=proto.__proto__;}
  916. return result;}
  917. object.callFunction(protoList,undefined,nodePrototypesReady.bind(this));object.release();}
  918. function nodePrototypesReady(object,wasThrown)
  919. {if(!object||wasThrown){finishCallback();return;}
  920. object.getOwnProperties(fillSection.bind(this));object.release();}
  921. function fillSection(prototypes)
  922. {if(!prototypes){finishCallback();return;}
  923. var expanded=[];var sections=this.sections||[];for(var i=0;i<sections.length;++i)
  924. expanded.push(sections[i].expanded);var body=this.bodyElement;body.removeChildren();this.sections=[];for(var i=0;i<prototypes.length;++i){if(!parseInt(prototypes[i].name,10))
  925. continue;var prototype=prototypes[i].value;var title=prototype.description;title=title.replace(/Prototype$/,"");var section=new WebInspector.ObjectPropertiesSection(prototype,title);this.sections.push(section);body.appendChild(section.element);if(expanded[this.sections.length-1])
  926. section.expand();}
  927. finishCallback();}},_onNodeChange:function(event)
  928. {if(!this.node())
  929. return;var data=event.data;var node=(data instanceof WebInspector.DOMNode?data:data.node);if(this.node()!==node)
  930. return;this.update();},__proto__:WebInspector.ElementsSidebarPane.prototype};WebInspector.StylesSectionModel=function(cascade,rule,style,customSelectorText,inheritedFromNode)
  931. {this._cascade=cascade;this._rule=rule;this._style=style;this._customSelectorText=customSelectorText;this._isAttribute=false;this._editable=!!(this._style&&this._style.styleSheetId);this._inheritedFromNode=inheritedFromNode||null;}
  932. WebInspector.StylesSectionModel.prototype={cascade:function()
  933. {return this._cascade;},hasMatchingSelectors:function()
  934. {return this.rule()?this.rule().matchingSelectors.length>0&&this.mediaMatches():true;},mediaMatches:function()
  935. {var media=this.media();for(var i=0;media&&i<media.length;++i){if(!media[i].active())
  936. return false;}
  937. return true;},inherited:function()
  938. {return!!this._inheritedFromNode;},parentNode:function()
  939. {return this._inheritedFromNode;},selectorText:function()
  940. {if(this._customSelectorText)
  941. return this._customSelectorText;return this.rule()?this.rule().selectorText:"";},editable:function()
  942. {return this._editable;},setEditable:function(editable)
  943. {this._editable=editable;},style:function()
  944. {return this._style;},rule:function()
  945. {return this._rule;},media:function()
  946. {return this.rule()?this.rule().media:null;},isAttribute:function()
  947. {return this._isAttribute;},setIsAttribute:function(isAttribute)
  948. {this._isAttribute=isAttribute;},updateRule:function(rule)
  949. {this._rule=rule;this._style=rule.style;this._cascade._resetUsedProperties();},updateStyleDeclaration:function(style)
  950. {this._style=style;if(this._rule){style.parentRule=this._rule;this._rule.style=style;}
  951. this._cascade._resetUsedProperties();},usedProperties:function()
  952. {return this._cascade._usedPropertiesForModel(this);},isPropertyOverloaded:function(propertyName,isShorthand)
  953. {if(!this.hasMatchingSelectors())
  954. return false;if(this.inherited()&&!WebInspector.CSSMetadata.isPropertyInherited(propertyName)){return false;}
  955. var canonicalName=WebInspector.CSSMetadata.canonicalPropertyName(propertyName);var used=this.usedProperties().has(canonicalName);if(used||!isShorthand)
  956. return!used;var longhandProperties=this.style().longhandProperties(propertyName);for(var j=0;j<longhandProperties.length;++j){var individualProperty=longhandProperties[j];var canonicalPropertyName=WebInspector.CSSMetadata.canonicalPropertyName(individualProperty.name);if(this.usedProperties().has(canonicalPropertyName))
  957. return false;}
  958. return true;}}
  959. WebInspector.SectionCascade=function()
  960. {this._models=[];this._resetUsedProperties();}
  961. WebInspector.SectionCascade.prototype={sectionModels:function()
  962. {return this._models;},appendModelFromRule:function(rule,inheritedFromNode)
  963. {return this._insertModel(new WebInspector.StylesSectionModel(this,rule,rule.style,"",inheritedFromNode));},insertModelFromRule:function(rule,insertAfterStyleRule)
  964. {return this._insertModel(new WebInspector.StylesSectionModel(this,rule,rule.style,"",null),insertAfterStyleRule);},appendModelFromStyle:function(style,selectorText,inheritedFromNode)
  965. {return this._insertModel(new WebInspector.StylesSectionModel(this,null,style,selectorText,inheritedFromNode));},allUsedProperties:function()
  966. {this._recomputeUsedPropertiesIfNeeded();return this._allUsedProperties;},_insertModel:function(model,insertAfter)
  967. {if(insertAfter){var index=this._models.indexOf(insertAfter);console.assert(index!==-1,"The insertAfter anchor could not be found in cascade");this._models.splice(index+1,0,model);}else{this._models.push(model);}
  968. this._resetUsedProperties();return model;},_recomputeUsedPropertiesIfNeeded:function()
  969. {if(this._usedPropertiesPerModel.size>0)
  970. return;var usedProperties=WebInspector.SectionCascade._computeUsedProperties(this._models,this._allUsedProperties);for(var i=0;i<usedProperties.length;++i)
  971. this._usedPropertiesPerModel.set(this._models[i],usedProperties[i]);},_resetUsedProperties:function()
  972. {this._allUsedProperties=new Set();this._usedPropertiesPerModel=new Map();},_usedPropertiesForModel:function(model)
  973. {this._recomputeUsedPropertiesIfNeeded();return this._usedPropertiesPerModel.get(model);}}
  974. WebInspector.SectionCascade._computeUsedProperties=function(styleRules,allUsedProperties)
  975. {var foundImportantProperties=new Set();var propertyToEffectiveRule=new Map();var inheritedPropertyToNode=new Map();var stylesUsedProperties=[];for(var i=0;i<styleRules.length;++i){var styleRule=styleRules[i];var styleRuleUsedProperties=new Set();stylesUsedProperties.push(styleRuleUsedProperties);if(!styleRule.hasMatchingSelectors())
  976. continue;var style=styleRule.style();var allProperties=style.allProperties;for(var j=0;j<allProperties.length;++j){var property=allProperties[j];if(!property.isLive||!property.parsedOk)
  977. continue;if(styleRule.inherited()&&!WebInspector.CSSMetadata.isPropertyInherited(property.name))
  978. continue;var canonicalName=WebInspector.CSSMetadata.canonicalPropertyName(property.name);if(foundImportantProperties.has(canonicalName))
  979. continue;if(!property.important&&allUsedProperties.has(canonicalName))
  980. continue;var isKnownProperty=propertyToEffectiveRule.has(canonicalName);var parentNode=styleRule.parentNode();if(!isKnownProperty&&parentNode&&!inheritedPropertyToNode.has(canonicalName))
  981. inheritedPropertyToNode.set(canonicalName,parentNode);if(property.important){if(styleRule.inherited()&&isKnownProperty&&styleRule.parentNode()!==inheritedPropertyToNode.get(canonicalName))
  982. continue;foundImportantProperties.add(canonicalName);if(isKnownProperty)
  983. propertyToEffectiveRule.get(canonicalName).delete(canonicalName);}
  984. styleRuleUsedProperties.add(canonicalName);allUsedProperties.add(canonicalName);propertyToEffectiveRule.set(canonicalName,styleRuleUsedProperties);}}
  985. return stylesUsedProperties;};WebInspector.StylesSidebarPane=function(computedStylePane,setPseudoClassCallback)
  986. {WebInspector.SidebarPane.call(this,WebInspector.UIString("Styles"));this._animationsControlButton=createElement("button");this._animationsControlButton.className="pane-title-button animations-controls";this._animationsControlButton.title=WebInspector.UIString("Animations Controls");this._animationsControlButton.addEventListener("click",this._toggleAnimationsControlPane.bind(this),false);this.titleElement.appendChild(this._animationsControlButton);this._elementStateButton=createElement("button");this._elementStateButton.className="pane-title-button element-state";this._elementStateButton.title=WebInspector.UIString("Toggle Element State");this._elementStateButton.addEventListener("click",this._toggleElementStatePane.bind(this),false);this.titleElement.appendChild(this._elementStateButton);var addButton=createElement("button");addButton.className="pane-title-button add";addButton.id="add-style-button-test-id";addButton.title=WebInspector.UIString("New Style Rule");addButton.addEventListener("click",this._createNewRuleInViaInspectorStyleSheet.bind(this),false);this.titleElement.appendChild(addButton);addButton.createChild("div","long-click-glyph fill");this._addButtonLongClickController=new WebInspector.LongClickController(addButton);this._addButtonLongClickController.addEventListener(WebInspector.LongClickController.Events.LongClick,this._onAddButtonLongClick.bind(this));this._addButtonLongClickController.enable();this._computedStylePane=computedStylePane;computedStylePane.setHostingPane(this);this._setPseudoClassCallback=setPseudoClassCallback;this.element.addEventListener("contextmenu",this._contextMenuEventFired.bind(this),true);WebInspector.settings.colorFormat.addChangeListener(this._colorFormatSettingChanged.bind(this));WebInspector.settings.showUserAgentStyles.addChangeListener(this._showUserAgentStylesSettingChanged.bind(this));this._createElementStatePane();this.bodyElement.appendChild(this._elementStatePane);this._createAnimationsControlPane();this.bodyElement.appendChild(this._animationsControlPane);this._sectionsContainer=createElement("div");this.bodyElement.appendChild(this._sectionsContainer);this._spectrumHelper=new WebInspector.SpectrumPopupHelper();this._linkifier=new WebInspector.Linkifier(new WebInspector.Linkifier.DefaultCSSFormatter());this.element.classList.add("styles-pane");this.element.classList.toggle("show-user-styles",WebInspector.settings.showUserAgentStyles.get());this.element.addEventListener("mousemove",this._mouseMovedOverElement.bind(this),false);this._keyDownBound=this._keyDown.bind(this);this._keyUpBound=this._keyUp.bind(this);}
  987. WebInspector.StylesSidebarPane.PseudoIdNames=["","first-line","first-letter","before","after","backdrop","selection","","-webkit-scrollbar","-webkit-scrollbar-thumb","-webkit-scrollbar-button","-webkit-scrollbar-track","-webkit-scrollbar-track-piece","-webkit-scrollbar-corner","-webkit-resizer"];WebInspector.StylesSidebarPane._colorRegex=/((?:rgb|hsl)a?\([^)]+\)|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3}|\b\w+\b(?!-))/g;WebInspector.StylesSidebarPane.Events={SelectorEditingStarted:"SelectorEditingStarted",SelectorEditingEnded:"SelectorEditingEnded"};WebInspector.StylesSidebarPane.createExclamationMark=function(property)
  988. {var exclamationElement=createElement("div");exclamationElement.className="exclamation-mark"+(WebInspector.StylesSidebarPane._ignoreErrorsForProperty(property)?"":" warning-icon-small");exclamationElement.title=WebInspector.CSSMetadata.cssPropertiesMetainfo.keySet()[property.name.toLowerCase()]?WebInspector.UIString("Invalid property value."):WebInspector.UIString("Unknown property name.");return exclamationElement;}
  989. WebInspector.StylesSidebarPane._colorFormat=function(color)
  990. {const cf=WebInspector.Color.Format;var format;var formatSetting=WebInspector.settings.colorFormat.get();if(formatSetting===cf.Original)
  991. format=cf.Original;else if(formatSetting===cf.RGB)
  992. format=(color.hasAlpha()?cf.RGBA:cf.RGB);else if(formatSetting===cf.HSL)
  993. format=(color.hasAlpha()?cf.HSLA:cf.HSL);else if(!color.hasAlpha())
  994. format=(color.canBeShortHex()?cf.ShortHEX:cf.HEX);else
  995. format=cf.RGBA;return format;}
  996. WebInspector.StylesSidebarPane._ignoreErrorsForProperty=function(property){function hasUnknownVendorPrefix(string)
  997. {return!string.startsWith("-webkit-")&&/^[-_][\w\d]+-\w/.test(string);}
  998. var name=property.name.toLowerCase();if(name.charAt(0)==="_")
  999. return true;if(name==="filter")
  1000. return true;if(name.startsWith("scrollbar-"))
  1001. return true;if(hasUnknownVendorPrefix(name))
  1002. return true;var value=property.value.toLowerCase();if(value.endsWith("\9"))
  1003. return true;if(hasUnknownVendorPrefix(value))
  1004. return true;return false;}
  1005. WebInspector.StylesSidebarPane.prototype={node:function()
  1006. {return this._node;},_onAddButtonLongClick:function(event)
  1007. {this._addButtonLongClickController.reset();var cssModel=this._target.cssModel;var headers=cssModel.styleSheetHeaders().filter(styleSheetResourceHeader);var contextMenuDescriptors=[];for(var i=0;i<headers.length;++i){var header=headers[i];var handler=this._createNewRuleInStyleSheet.bind(this,header);contextMenuDescriptors.push({text:WebInspector.displayNameForURL(header.resourceURL()),handler:handler});}
  1008. contextMenuDescriptors.sort(compareDescriptors);var contextMenu=new WebInspector.ContextMenu((event.data));for(var i=0;i<contextMenuDescriptors.length;++i){var descriptor=contextMenuDescriptors[i];contextMenu.appendItem(descriptor.text,descriptor.handler);}
  1009. if(!contextMenu.isEmpty())
  1010. contextMenu.appendSeparator();contextMenu.appendItem("inspector-stylesheet",this._createNewRuleInViaInspectorStyleSheet.bind(this));contextMenu.show();function compareDescriptors(descriptor1,descriptor2)
  1011. {return String.naturalOrderComparator(descriptor1.text,descriptor2.text);}
  1012. function styleSheetResourceHeader(header)
  1013. {return!header.isViaInspector()&&!header.isInline&&!!header.resourceURL();}},updateEditingSelectorForNode:function(node)
  1014. {var selectorText=WebInspector.DOMPresentationUtils.simpleSelector(node);if(!selectorText)
  1015. return;this._editingSelectorSection.setSelectorText(selectorText);},isEditingSelector:function()
  1016. {return!!this._editingSelectorSection;},_startEditingSelector:function(section)
  1017. {this._editingSelectorSection=section;this.dispatchEventToListeners(WebInspector.StylesSidebarPane.Events.SelectorEditingStarted);},_finishEditingSelector:function()
  1018. {delete this._editingSelectorSection;this.dispatchEventToListeners(WebInspector.StylesSidebarPane.Events.SelectorEditingEnded);},_styleSheetRuleEdited:function(editedRule,oldRange,newRange)
  1019. {if(!editedRule.styleSheetId)
  1020. return;for(var pseudoId in this.sections){var styleRuleSections=this.sections[pseudoId];for(var i=0;i<styleRuleSections.length;++i){var section=styleRuleSections[i];if(section.computedStyle)
  1021. continue;section._styleSheetRuleEdited(editedRule,oldRange,newRange);}}},_styleSheetMediaEdited:function(oldMedia,newMedia)
  1022. {if(!oldMedia.parentStyleSheetId)
  1023. return;for(var pseudoId in this.sections){var styleRuleSections=this.sections[pseudoId];for(var i=0;i<styleRuleSections.length;++i){var section=styleRuleSections[i];if(section.computedStyle)
  1024. continue;section._styleSheetMediaEdited(oldMedia,newMedia);}}},_contextMenuEventFired:function(event)
  1025. {var contextMenu=new WebInspector.ContextMenu(event);contextMenu.appendApplicableItems((event.target));contextMenu.show();},setFilterBoxContainer:function(matchedStylesElement)
  1026. {matchedStylesElement.appendChild(this._createCSSFilterControl());},_createCSSFilterControl:function()
  1027. {var filterInput=WebInspector.StylesSidebarPane._createPropertyFilterElement(WebInspector.UIString("Find in Styles"),searchHandler.bind(this));function searchHandler(regex)
  1028. {this._filterRegex=regex;this._updateFilter();}
  1029. return filterInput;},get _forcedPseudoClasses()
  1030. {return this._node?(this._node.getUserProperty(WebInspector.CSSStyleModel.PseudoStatePropertyName)||undefined):undefined;},_updateForcedPseudoStateInputs:function()
  1031. {if(!this._node)
  1032. return;var hasPseudoType=!!this._node.pseudoType();this._elementStateButton.classList.toggle("hidden",hasPseudoType);this._elementStatePane.classList.toggle("expanded",!hasPseudoType&&this._elementStateButton.classList.contains("toggled"));var nodePseudoState=this._forcedPseudoClasses;if(!nodePseudoState)
  1033. nodePseudoState=[];var inputs=this._elementStatePane.inputs;for(var i=0;i<inputs.length;++i)
  1034. inputs[i].checked=nodePseudoState.indexOf(inputs[i].state)>=0;},setNode:function(node)
  1035. {this._spectrumHelper.hide();this._discardElementUnderMouse();if(node&&node.nodeType()===Node.TEXT_NODE&&node.parentNode)
  1036. node=node.parentNode;if(node&&node.nodeType()!==Node.ELEMENT_NODE)
  1037. node=null;this._node=node;if(node)
  1038. this._updateTarget(node.target());this._computedStylePane.setNode(node);this._resetCache();this._scheduleUpdate();},_scheduleUpdate:function()
  1039. {if(!this.isShowing()&&!this._computedStylePane.isShowing()){this._updateWhenVisible=true;return;}
  1040. this._rebuildUpdate();},_updateTarget:function(target)
  1041. {if(this._target===target)
  1042. return;if(this._target){this._target.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.StyleSheetAdded,this._styleSheetOrMediaQueryResultChanged,this);this._target.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.StyleSheetRemoved,this._styleSheetOrMediaQueryResultChanged,this);this._target.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.StyleSheetChanged,this._styleSheetOrMediaQueryResultChanged,this);this._target.cssModel.removeEventListener(WebInspector.CSSStyleModel.Events.MediaQueryResultChanged,this._styleSheetOrMediaQueryResultChanged,this);this._target.domModel.removeEventListener(WebInspector.DOMModel.Events.AttrModified,this._attributeChanged,this);this._target.domModel.removeEventListener(WebInspector.DOMModel.Events.AttrRemoved,this._attributeChanged,this);this._target.resourceTreeModel.removeEventListener(WebInspector.ResourceTreeModel.EventTypes.FrameResized,this._frameResized,this);}
  1043. this._target=target;this._target.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetAdded,this._styleSheetOrMediaQueryResultChanged,this);this._target.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetRemoved,this._styleSheetOrMediaQueryResultChanged,this);this._target.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetChanged,this._styleSheetOrMediaQueryResultChanged,this);this._target.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.MediaQueryResultChanged,this._styleSheetOrMediaQueryResultChanged,this);this._target.domModel.addEventListener(WebInspector.DOMModel.Events.AttrModified,this._attributeChanged,this);this._target.domModel.addEventListener(WebInspector.DOMModel.Events.AttrRemoved,this._attributeChanged,this);this._target.resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.FrameResized,this._frameResized,this);},_refreshUpdate:function(editedSection)
  1044. {var node=this._validateNode();if(!node)
  1045. return;this._innerRefreshUpdate(node,editedSection);if(this._filterRegex)
  1046. this._updateFilter();},_rebuildUpdate:function()
  1047. {this._updateForcedPseudoStateInputs();if(this._rebuildUpdateInProgress){this._lastNodeForInnerRebuild=this.node();return;}
  1048. var node=this._validateNode();if(!node)
  1049. return;this._rebuildUpdateInProgress=true;this._fetchMatchedCascade().then(onStylesLoaded.bind(this));function onStylesLoaded(cascades)
  1050. {var lastRequestedRebuildNode=this._lastNodeForInnerRebuild||node;delete this._rebuildUpdateInProgress;delete this._lastNodeForInnerRebuild;if(node!==lastRequestedRebuildNode){this._rebuildUpdate();return;}
  1051. this._innerRebuildUpdate(cascades);}},_resetCache:function()
  1052. {delete this._matchedCascadePromise;this._resetComputedCache();},_resetComputedCache:function()
  1053. {delete this._computedCascadePromise;delete this._animationPropertiesPromise;},_fetchMatchedCascade:function()
  1054. {var node=this.node();if(!node)
  1055. return Promise.resolve((null));if(!this._matchedCascadePromise)
  1056. this._matchedCascadePromise=new Promise(this._getMatchedStylesForNode.bind(this,node)).then(buildMatchedCascades.bind(this,node));return this._matchedCascadePromise;function buildMatchedCascades(node,payload)
  1057. {if(node!==this.node()||!payload.fulfilled())
  1058. return null;return{matched:this._buildMatchedRulesSectionCascade(node,payload),pseudo:this._buildPseudoCascades(node,payload)};}},_fetchComputedCascade:function()
  1059. {var node=this.node();if(!node)
  1060. return Promise.resolve((null));if(!this._computedCascadePromise)
  1061. this._computedCascadePromise=new Promise(getComputedStyle.bind(null,node)).then(buildComputedCascade.bind(this,node));return this._computedCascadePromise;function getComputedStyle(node,resolve)
  1062. {node.target().cssModel.getComputedStyleAsync(node.id,resolve);}
  1063. function buildComputedCascade(node,styles)
  1064. {if(node!==this.node())
  1065. return null;if(!styles)
  1066. return null;var computedCascade=new WebInspector.SectionCascade();computedCascade.appendModelFromStyle(styles,"");return computedCascade;}},_fetchAnimationProperties:function()
  1067. {var node=this.node();if(!node)
  1068. return Promise.resolve(new Map());if(!this._animationPropertiesPromise)
  1069. this._animationPropertiesPromise=new Promise(this._getAnimationPropertiesForNode.bind(this,node)).then(onAnimationProperties.bind(this));return this._animationPropertiesPromise;function onAnimationProperties(properties)
  1070. {return this.node()!==node?new Map():properties;}},_getMatchedStylesForNode:function(node,callback)
  1071. {var target=node.target();target.cssModel.getInlineStylesAsync(node.id,inlineCallback);target.cssModel.getMatchedStylesAsync(node.id,false,false,matchedCallback);var payload=new WebInspector.StylesSidebarPane.MatchedRulesPayload();function inlineCallback(inlineStyle,attributesStyle)
  1072. {payload.inlineStyle=(inlineStyle);payload.attributesStyle=(attributesStyle);}
  1073. function matchedCallback(matchedResult)
  1074. {if(matchedResult){payload.matchedCSSRules=(matchedResult.matchedCSSRules);payload.pseudoElements=(matchedResult.pseudoElements);payload.inherited=(matchedResult.inherited);}
  1075. callback(payload);}},_getAnimationPropertiesForNode:function(node,callback)
  1076. {if(Runtime.experiments.isEnabled("animationInspection"))
  1077. node.target().animationModel.getAnimationPlayers(node.id,false,animationPlayersCallback);else
  1078. callback(new Map());function animationPlayersCallback(animationPlayers)
  1079. {var animationProperties=new Map();if(!animationPlayers)
  1080. return;for(var i=0;i<animationPlayers.length;i++){var player=animationPlayers[i];if(!player.source().keyframesRule())
  1081. continue;var animationCascade=new WebInspector.SectionCascade();var keyframes=player.source().keyframesRule().keyframes();for(var j=0;j<keyframes.length;j++)
  1082. animationCascade.appendModelFromStyle(keyframes[j].style(),"");for(var property of animationCascade.allUsedProperties())
  1083. animationProperties.set(property,player.name());}
  1084. callback(animationProperties);}},_validateNode:function()
  1085. {if(!this._node){this._sectionsContainer.removeChildren();this.sections={};return null;}
  1086. return this._node;},_styleSheetOrMediaQueryResultChanged:function()
  1087. {if(this._userOperation||this._isEditingStyle){this._resetComputedCache();return;}
  1088. this._resetCache();this._scheduleUpdate();},_frameResized:function()
  1089. {function refreshContents()
  1090. {this._styleSheetOrMediaQueryResultChanged();delete this._activeTimer;}
  1091. if(this._activeTimer)
  1092. clearTimeout(this._activeTimer);this._activeTimer=setTimeout(refreshContents.bind(this),100);},_attributeChanged:function(event)
  1093. {if(this._isEditingStyle||this._userOperation){this._resetComputedCache();return;}
  1094. if(!this._canAffectCurrentStyles(event.data.node))
  1095. return;this._resetCache();this._scheduleUpdate();},_canAffectCurrentStyles:function(node)
  1096. {return this._node&&(this._node===node||node.parentNode===this._node.parentNode||node.isAncestor(this._node));},_innerRefreshUpdate:function(node,editedSection)
  1097. {for(var pseudoId in this.sections){var sections=this.sections[pseudoId].filter(nonBlankSections);for(var section of sections)
  1098. section.update(section===editedSection);}
  1099. this._computedStylePane.update();this._nodeStylesUpdatedForTest(node,false);function nonBlankSections(section)
  1100. {return!section.isBlank;}},_innerRebuildUpdate:function(cascades)
  1101. {this._linkifier.reset();this._sectionsContainer.removeChildren();this.sections={};var node=this.node();if(!cascades||!node)
  1102. return;if(!!node.pseudoType())
  1103. this._appendTopPadding();this.sections[0]=this._rebuildSectionsForStyleRules(cascades.matched);this._computedStylePane.update();var pseudoIds=cascades.pseudo.keysArray().sort();for(var pseudoId of pseudoIds){this._appendSectionPseudoIdSeparator(pseudoId);this.sections[pseudoId]=this._rebuildSectionsForStyleRules(cascades.pseudo.get(pseudoId));}
  1104. if(this._filterRegex)
  1105. this._updateFilter();this._nodeStylesUpdatedForTest(node,true);this._updateAnimationsPlaybackRate();},_buildPseudoCascades:function(node,styles)
  1106. {var pseudoCascades=new Map();for(var i=0;i<styles.pseudoElements.length;++i){var pseudoElementCSSRules=styles.pseudoElements[i];var pseudoId=pseudoElementCSSRules.pseudoId;var pseudoElementCascade=new WebInspector.SectionCascade();for(var j=pseudoElementCSSRules.rules.length-1;j>=0;--j){var rule=pseudoElementCSSRules.rules[j];pseudoElementCascade.appendModelFromRule(rule);}
  1107. pseudoCascades.set(pseudoId,pseudoElementCascade);}
  1108. return pseudoCascades;},_nodeStylesUpdatedForTest:function(node,rebuild)
  1109. {},_buildMatchedRulesSectionCascade:function(node,styles)
  1110. {var cascade=new WebInspector.SectionCascade();function addAttributesStyle()
  1111. {if(!styles.attributesStyle)
  1112. return;var selectorText=node.nodeNameInCorrectCase()+"["+WebInspector.UIString("Attributes Style")+"]";cascade.appendModelFromStyle(styles.attributesStyle,selectorText);}
  1113. if(styles.inlineStyle&&node.nodeType()===Node.ELEMENT_NODE){var model=cascade.appendModelFromStyle(styles.inlineStyle,"element.style");model.setIsAttribute(true);}
  1114. var addedAttributesStyle;for(var i=styles.matchedCSSRules.length-1;i>=0;--i){var rule=styles.matchedCSSRules[i];if((rule.isInjected||rule.isUserAgent)&&!addedAttributesStyle){addedAttributesStyle=true;addAttributesStyle();}
  1115. cascade.appendModelFromRule(rule);}
  1116. if(!addedAttributesStyle)
  1117. addAttributesStyle();var parentNode=node.parentNode;for(var parentOrdinal=0;parentOrdinal<styles.inherited.length;++parentOrdinal){var parentStyles=styles.inherited[parentOrdinal];if(parentStyles.inlineStyle){if(this._containsInherited(parentStyles.inlineStyle)){var model=cascade.appendModelFromStyle(parentStyles.inlineStyle,WebInspector.UIString("Style Attribute"),parentNode);model.setIsAttribute(true);}}
  1118. for(var i=parentStyles.matchedCSSRules.length-1;i>=0;--i){var rulePayload=parentStyles.matchedCSSRules[i];if(!this._containsInherited(rulePayload.style))
  1119. continue;cascade.appendModelFromRule(rulePayload,parentNode);}
  1120. parentNode=parentNode.parentNode;}
  1121. return cascade;},_appendTopPadding:function()
  1122. {var separatorElement=createElement("div");separatorElement.className="styles-sidebar-placeholder";this._sectionsContainer.appendChild(separatorElement);},_appendSectionPseudoIdSeparator:function(pseudoId)
  1123. {var separatorElement=createElement("div");separatorElement.className="sidebar-separator";var pseudoName=WebInspector.StylesSidebarPane.PseudoIdNames[pseudoId];if(pseudoName)
  1124. separatorElement.textContent=WebInspector.UIString("Pseudo ::%s element",pseudoName);else
  1125. separatorElement.textContent=WebInspector.UIString("Pseudo element");this._sectionsContainer.appendChild(separatorElement);},_appendSectionInheritedNodeSeparator:function(node)
  1126. {var separatorElement=createElement("div");separatorElement.className="sidebar-separator";var link=WebInspector.DOMPresentationUtils.linkifyNodeReference(node);separatorElement.createTextChild(WebInspector.UIString("Inherited from")+" ");separatorElement.appendChild(link);this._sectionsContainer.appendChild(separatorElement);},_rebuildSectionsForStyleRules:function(cascade)
  1127. {var sections=[];var lastParentNode=null;for(var sectionModel of cascade.sectionModels()){var parentNode=sectionModel.parentNode();if(parentNode&&parentNode!==lastParentNode){lastParentNode=parentNode;this._appendSectionInheritedNodeSeparator(lastParentNode);}
  1128. var section=new WebInspector.StylePropertiesSection(this,sectionModel);section._markSelectorMatches();section.expand();this._sectionsContainer.appendChild(section.element);sections.push(section);}
  1129. return sections;},_containsInherited:function(style)
  1130. {var properties=style.allProperties;for(var i=0;i<properties.length;++i){var property=properties[i];if(property.isLive&&WebInspector.CSSMetadata.isPropertyInherited(property.name))
  1131. return true;}
  1132. return false;},_colorFormatSettingChanged:function(event)
  1133. {for(var pseudoId in this.sections){var sections=this.sections[pseudoId];for(var i=0;i<sections.length;++i)
  1134. sections[i].update(true);}},_createNewRuleInViaInspectorStyleSheet:function(event)
  1135. {var cssModel=this._target.cssModel;cssModel.requestViaInspectorStylesheet(this._node,this._createNewRuleInStyleSheet.bind(this));},_createNewRuleInStyleSheet:function(styleSheetHeader)
  1136. {if(!styleSheetHeader)
  1137. return;styleSheetHeader.requestContent(onStyleSheetContent.bind(this,styleSheetHeader.id));function onStyleSheetContent(styleSheetId,text)
  1138. {var lines=text.split("\n");var range=WebInspector.TextRange.createFromLocation(lines.length-1,lines[lines.length-1].length);this._addBlankSection(this.sections[0][0],styleSheetId,range);}},_addBlankSection:function(insertAfterSection,styleSheetId,ruleLocation)
  1139. {this.expand();var blankSection=new WebInspector.BlankStylePropertiesSection(this,this._node?WebInspector.DOMPresentationUtils.simpleSelector(this._node):"",styleSheetId,ruleLocation,insertAfterSection.styleRule);this._sectionsContainer.insertBefore(blankSection.element,insertAfterSection.element.nextSibling);var index=this.sections[0].indexOf(insertAfterSection);this.sections[0].splice(index+1,0,blankSection);blankSection.startEditingSelector();},removeSection:function(section)
  1140. {for(var pseudoId in this.sections){var sections=this.sections[pseudoId];var index=sections.indexOf(section);if(index===-1)
  1141. continue;sections.splice(index,1);section.element.remove();}},_toggleElementStatePane:function(event)
  1142. {event.consume();var buttonToggled=!this._elementStateButton.classList.contains("toggled");if(buttonToggled)
  1143. this.expand();this._elementStateButton.classList.toggle("toggled",buttonToggled);this._elementStatePane.classList.toggle("expanded",buttonToggled);this._animationsControlButton.classList.remove("toggled");this._animationsControlPane.classList.remove("expanded");},_createElementStatePane:function()
  1144. {this._elementStatePane=createElement("div");this._elementStatePane.className="styles-element-state-pane source-code";var table=createElement("table");var inputs=[];this._elementStatePane.inputs=inputs;function clickListener(event)
  1145. {var node=this._validateNode();if(!node)
  1146. return;this._setPseudoClassCallback(node,event.target.state,event.target.checked);}
  1147. function createCheckbox(state)
  1148. {var td=createElement("td");var label=createCheckboxLabel(":"+state);var input=label.checkboxElement;input.state=state;input.addEventListener("click",clickListener.bind(this),false);inputs.push(input);td.appendChild(label);return td;}
  1149. var tr=table.createChild("tr");tr.appendChild(createCheckbox.call(this,"active"));tr.appendChild(createCheckbox.call(this,"hover"));tr=table.createChild("tr");tr.appendChild(createCheckbox.call(this,"focus"));tr.appendChild(createCheckbox.call(this,"visited"));this._elementStatePane.appendChild(table);},_toggleAnimationsControlPane:function(event)
  1150. {event.consume();var buttonToggled=!this._animationsControlButton.classList.contains("toggled");if(buttonToggled)
  1151. this.expand();this._animationsControlButton.classList.toggle("toggled",buttonToggled);this._animationsControlPane.classList.toggle("expanded",buttonToggled);this._elementStateButton.classList.remove("toggled");this._elementStatePane.classList.remove("expanded");},_updateAnimationsPlaybackRate:function()
  1152. {function setPlaybackRate(error,playbackRate)
  1153. {this._animationsPlaybackSlider.value=WebInspector.AnimationsSidebarPane.GlobalPlaybackRates.indexOf(playbackRate);this._animationsPlaybackLabel.textContent=playbackRate+"x";}
  1154. PageAgent.animationsPlaybackRate(setPlaybackRate.bind(this));},_createAnimationsControlPane:function()
  1155. {function playbackSliderInputHandler(event)
  1156. {this._animationsPlaybackRate=WebInspector.AnimationsSidebarPane.GlobalPlaybackRates[event.target.value];PageAgent.setAnimationsPlaybackRate(this._animationsPaused?0:this._animationsPlaybackRate);this._animationsPlaybackLabel.textContent=this._animationsPlaybackRate+"x";WebInspector.userMetrics.AnimationsPlaybackRateChanged.record();}
  1157. function pauseButtonHandler()
  1158. {this._animationsPaused=!this._animationsPaused;PageAgent.setAnimationsPlaybackRate(this._animationsPaused?0:this._animationsPlaybackRate);WebInspector.userMetrics.AnimationsPlaybackRateChanged.record();this._animationsPauseButton.element.classList.toggle("pause-status-bar-item");this._animationsPauseButton.element.classList.toggle("play-status-bar-item");}
  1159. this._animationsPaused=false;this._animationsPlaybackRate=1;this._updateAnimationsPlaybackRate();this._animationsControlPane=createElementWithClass("div","styles-animations-controls-pane");var labelElement=createElement("div");labelElement.createTextChild("Animations");this._animationsControlPane.appendChild(labelElement);var container=this._animationsControlPane.createChild("div","animations-controls");var statusBar=new WebInspector.StatusBar();this._animationsPauseButton=new WebInspector.StatusBarButton("","pause-status-bar-item");statusBar.appendStatusBarItem(this._animationsPauseButton);this._animationsPauseButton.addEventListener("click",pauseButtonHandler.bind(this));container.appendChild(statusBar.element);this._animationsPlaybackSlider=container.createChild("input");this._animationsPlaybackSlider.type="range";this._animationsPlaybackSlider.min=0;this._animationsPlaybackSlider.max=WebInspector.AnimationsSidebarPane.GlobalPlaybackRates.length-1;this._animationsPlaybackSlider.value=this._animationsPlaybackSlider.max;this._animationsPlaybackSlider.addEventListener("input",playbackSliderInputHandler.bind(this));this._animationsPlaybackLabel=container.createChild("div","playback-label");this._animationsPlaybackLabel.createTextChild("1x");},filterRegex:function()
  1160. {return this._filterRegex;},_updateFilter:function()
  1161. {for(var pseudoId in this.sections){var sections=this.sections[pseudoId];for(var i=0;i<sections.length;++i){var section=sections[i];section._updateFilter();}}},_showUserAgentStylesSettingChanged:function(event)
  1162. {var showStyles=(event.data);this.element.classList.toggle("show-user-styles",showStyles);},wasShown:function()
  1163. {WebInspector.SidebarPane.prototype.wasShown.call(this);this.element.ownerDocument.body.addEventListener("keydown",this._keyDownBound,false);this.element.ownerDocument.body.addEventListener("keyup",this._keyUpBound,false);if(this._updateWhenVisible){this._rebuildUpdate();delete this._updateWhenVisible;}},willHide:function()
  1164. {this.element.ownerDocument.body.removeEventListener("keydown",this._keyDownBound,false);this.element.ownerDocument.body.removeEventListener("keyup",this._keyUpBound,false);this._spectrumHelper.hide();this._discardElementUnderMouse();WebInspector.SidebarPane.prototype.willHide.call(this);},_discardElementUnderMouse:function()
  1165. {if(this._elementUnderMouse)
  1166. this._elementUnderMouse.classList.remove("styles-panel-hovered");delete this._elementUnderMouse;},_mouseMovedOverElement:function(event)
  1167. {if(this._elementUnderMouse&&event.target!==this._elementUnderMouse)
  1168. this._discardElementUnderMouse();this._elementUnderMouse=event.target;if(WebInspector.KeyboardShortcut.eventHasCtrlOrMeta((event)))
  1169. this._elementUnderMouse.classList.add("styles-panel-hovered");},_keyDown:function(event)
  1170. {if((!WebInspector.isMac()&&event.keyCode===WebInspector.KeyboardShortcut.Keys.Ctrl.code)||(WebInspector.isMac()&&event.keyCode===WebInspector.KeyboardShortcut.Keys.Meta.code)){if(this._elementUnderMouse)
  1171. this._elementUnderMouse.classList.add("styles-panel-hovered");}},_keyUp:function(event)
  1172. {if((!WebInspector.isMac()&&event.keyCode===WebInspector.KeyboardShortcut.Keys.Ctrl.code)||(WebInspector.isMac()&&event.keyCode===WebInspector.KeyboardShortcut.Keys.Meta.code)){this._discardElementUnderMouse();}},__proto__:WebInspector.SidebarPane.prototype}
  1173. WebInspector.StylesSidebarPane._createPropertyFilterElement=function(placeholder,filterCallback)
  1174. {var input=createElement("input");input.type="text";input.placeholder=placeholder;function searchHandler()
  1175. {var regex=input.value?new RegExp(input.value.escapeForRegExp(),"i"):null;filterCallback(regex);input.parentNode.classList.toggle("styles-filter-engaged",!!input.value);}
  1176. input.addEventListener("input",searchHandler,false);function keydownHandler(event)
  1177. {var Esc="U+001B";if(event.keyIdentifier!==Esc||!input.value)
  1178. return;event.consume(true);input.value="";searchHandler();}
  1179. input.addEventListener("keydown",keydownHandler,false);return input;}
  1180. WebInspector.ComputedStyleSidebarPane=function()
  1181. {WebInspector.ElementsSidebarPane.call(this,WebInspector.UIString("Computed Style"));WebInspector.settings.showInheritedComputedStyleProperties.addChangeListener(this._showInheritedComputedStyleChanged.bind(this));this._linkifier=new WebInspector.Linkifier(new WebInspector.Linkifier.DefaultCSSFormatter());}
  1182. WebInspector.ComputedStyleSidebarPane.prototype={_showInheritedComputedStyleChanged:function()
  1183. {this._computedStyleSection.update();this._computedStyleSection._rebuildComputedTrace();},setNode:function(node)
  1184. {if(node)
  1185. this._target=node.target();WebInspector.ElementsSidebarPane.prototype.setNode.call(this,node);},doUpdate:function(finishedCallback)
  1186. {var promises=[this._stylesSidebarPane._fetchComputedCascade(),this._stylesSidebarPane._fetchMatchedCascade(),this._stylesSidebarPane._fetchAnimationProperties()];Promise.all(promises).spread(this._innerRebuildUpdate.bind(this)).then(finishedCallback);},_innerRebuildUpdate:function(computedCascade,cascades,animationProperties)
  1187. {this._linkifier.reset();this.bodyElement.removeChildren();if(!computedCascade||!cascades)
  1188. return;var computedStyleRule=computedCascade.sectionModels()[0];this._computedStyleSection=new WebInspector.ComputedStylePropertiesSection(this,computedStyleRule,cascades.matched,animationProperties);this._computedStyleSection.expand();this._computedStyleSection._rebuildComputedTrace();this.bodyElement.appendChild(this._computedStyleSection.element);},_updateFilter:function()
  1189. {this._computedStyleSection._updateFilter();},setHostingPane:function(pane)
  1190. {this._stylesSidebarPane=pane;},setFilterBoxContainer:function(element)
  1191. {element.appendChild(WebInspector.StylesSidebarPane._createPropertyFilterElement(WebInspector.UIString("Filter"),filterCallback.bind(this)));function filterCallback(regex)
  1192. {this._filterRegex=regex;this._updateFilter();}},filterRegex:function()
  1193. {return this._filterRegex;},__proto__:WebInspector.ElementsSidebarPane.prototype}
  1194. WebInspector.StylePropertiesSection=function(parentPane,styleRule)
  1195. {WebInspector.Section.call(this,"");this._parentPane=parentPane;this.styleRule=styleRule;this.editable=styleRule.editable();var rule=styleRule.rule();var extraClasses=(rule&&(rule.isInjected||rule.isUserAgent)?" user-rule":"");this.element.className="styles-section matched-styles monospace"+extraClasses;this.propertiesElement.classList.remove("properties-tree");var selectorContainer=createElement("div");this._selectorElement=createElement("span");this._selectorElement.textContent=styleRule.selectorText();selectorContainer.appendChild(this._selectorElement);var openBrace=createElement("span");openBrace.textContent=" {";selectorContainer.appendChild(openBrace);selectorContainer.addEventListener("mousedown",this._handleEmptySpaceMouseDown.bind(this),false);selectorContainer.addEventListener("click",this._handleSelectorContainerClick.bind(this),false);var closeBrace=createElement("div");closeBrace.textContent="}";this.element.appendChild(closeBrace);if(this.editable&&rule){var newRuleButton=closeBrace.createChild("div","sidebar-pane-button-new-rule");newRuleButton.title=WebInspector.UIString("Insert Style Rule");newRuleButton.addEventListener("click",this._onNewRuleClick.bind(this),false);}
  1196. this._selectorElement.addEventListener("click",this._handleSelectorClick.bind(this),false);this.element.addEventListener("mousedown",this._handleEmptySpaceMouseDown.bind(this),false);this.element.addEventListener("click",this._handleEmptySpaceClick.bind(this),false);if(rule){if(rule.isUserAgent||rule.isInjected)
  1197. this.editable=false;else{if(rule.styleSheetId)
  1198. this.navigable=!!rule.resourceURL();}
  1199. this.titleElement.classList.add("styles-selector");}
  1200. this._selectorRefElement=createElement("div");this._selectorRefElement.className="subtitle";this._mediaListElement=this.titleElement.createChild("div","media-list media-matches");this._updateMediaList();this._updateRuleOrigin();selectorContainer.insertBefore(this._selectorRefElement,selectorContainer.firstChild);this.titleElement.appendChild(selectorContainer);this._selectorContainer=selectorContainer;if(this.navigable)
  1201. this.element.classList.add("navigable");if(!this.editable)
  1202. this.element.classList.add("read-only");}
  1203. WebInspector.StylePropertiesSection.prototype={firstSibling:function()
  1204. {var parent=this.element.parentElement;if(!parent)
  1205. return null;var childElement=parent.firstChild;while(childElement){if(childElement._section)
  1206. return childElement._section;childElement=childElement.nextSibling;}
  1207. return null;},lastSibling:function()
  1208. {var parent=this.element.parentElement;if(!parent)
  1209. return null;var childElement=parent.lastChild;while(childElement){if(childElement._section)
  1210. return childElement._section;childElement=childElement.previousSibling;}
  1211. return null;},nextSibling:function()
  1212. {var curElement=this.element;do{curElement=curElement.nextSibling;}while(curElement&&!curElement._section);return curElement?curElement._section:null;},previousSibling:function()
  1213. {var curElement=this.element;do{curElement=curElement.previousSibling;}while(curElement&&!curElement._section);return curElement?curElement._section:null;},inherited:function()
  1214. {return this.styleRule.inherited();},rule:function()
  1215. {return this.styleRule.rule();},_onNewRuleClick:function(event)
  1216. {event.consume();var rule=this.rule();var range=WebInspector.TextRange.createFromLocation(rule.style.range.endLine,rule.style.range.endColumn+1);this._parentPane._addBlankSection(this,(rule.styleSheetId),range);},_styleSheetRuleEdited:function(editedRule,oldRange,newRange)
  1217. {var rule=this.rule();if(!rule||!rule.styleSheetId)
  1218. return;if(rule!==editedRule)
  1219. rule.sourceStyleSheetEdited((editedRule.styleSheetId),oldRange,newRange);this._updateMediaList();this._updateRuleOrigin();},_styleSheetMediaEdited:function(oldMedia,newMedia)
  1220. {var rule=this.rule();if(!rule||!rule.styleSheetId)
  1221. return;rule.mediaEdited(oldMedia,newMedia);this._updateMediaList();},_createMediaList:function(mediaRules)
  1222. {if(!mediaRules)
  1223. return;for(var i=mediaRules.length-1;i>=0;--i){var media=mediaRules[i];var mediaDataElement=this._mediaListElement.createChild("div","media");if(media.sourceURL){var refElement=mediaDataElement.createChild("div","subtitle");var anchor=this._parentPane._linkifier.linkifyMedia(media);anchor.style.float="right";refElement.appendChild(anchor);}
  1224. var mediaContainerElement=mediaDataElement.createChild("span");var mediaTextElement=mediaContainerElement.createChild("span","media-text");mediaTextElement.title=media.text;switch(media.source){case WebInspector.CSSMedia.Source.LINKED_SHEET:case WebInspector.CSSMedia.Source.INLINE_SHEET:mediaTextElement.textContent="media=\""+media.text+"\"";break;case WebInspector.CSSMedia.Source.MEDIA_RULE:var decoration=mediaContainerElement.createChild("span");mediaContainerElement.insertBefore(decoration,mediaTextElement);decoration.textContent="@media ";decoration.title=media.text;mediaTextElement.textContent=media.text;if(media.parentStyleSheetId){mediaDataElement.classList.add("editable-media");mediaTextElement.addEventListener("click",this._handleMediaRuleClick.bind(this,media,mediaTextElement),false);}
  1225. break;case WebInspector.CSSMedia.Source.IMPORT_RULE:mediaTextElement.textContent="@import "+media.text;break;}}},_updateMediaList:function()
  1226. {this._mediaListElement.removeChildren();this._createMediaList(this.styleRule.media());},collapse:function()
  1227. {},handleClick:function()
  1228. {},isPropertyInherited:function(propertyName)
  1229. {if(this.inherited()){return!WebInspector.CSSMetadata.isPropertyInherited(propertyName);}
  1230. return false;},nextEditableSibling:function()
  1231. {var curSection=this;do{curSection=curSection.nextSibling();}while(curSection&&!curSection.editable);if(!curSection){curSection=this.firstSibling();while(curSection&&!curSection.editable)
  1232. curSection=curSection.nextSibling();}
  1233. return(curSection&&curSection.editable)?curSection:null;},previousEditableSibling:function()
  1234. {var curSection=this;do{curSection=curSection.previousSibling();}while(curSection&&!curSection.editable);if(!curSection){curSection=this.lastSibling();while(curSection&&!curSection.editable)
  1235. curSection=curSection.previousSibling();}
  1236. return(curSection&&curSection.editable)?curSection:null;},update:function(full)
  1237. {if(this.styleRule.selectorText())
  1238. this._selectorElement.textContent=this.styleRule.selectorText();this._markSelectorMatches();if(full){this.propertiesTreeOutline.removeChildren();this.repopulate();}else{var child=this.propertiesTreeOutline.children[0];while(child){child.overloaded=this.styleRule.isPropertyOverloaded(child.name,child.isShorthand);child=child.traverseNextTreeElement(false,null,true);}}
  1239. this.afterUpdate();},afterUpdate:function()
  1240. {if(this._afterUpdate){this._afterUpdate(this);delete this._afterUpdate;this._afterUpdateFinishedForTest();}},_afterUpdateFinishedForTest:function()
  1241. {},onpopulate:function()
  1242. {var style=this.styleRule.style();var allProperties=style.allProperties;var styleHasEditableSource=this.editable&&!!style.range;if(styleHasEditableSource){for(var i=0;i<allProperties.length;++i){var property=allProperties[i];if(property.styleBased)
  1243. continue;var isShorthand=!!WebInspector.CSSMetadata.cssPropertiesMetainfo.longhands(property.name);var inherited=this.isPropertyInherited(property.name);var overloaded=property.inactive||this.styleRule.isPropertyOverloaded(property.name);var item=new WebInspector.StylePropertyTreeElement(this._parentPane,this.styleRule,property,isShorthand,inherited,overloaded);this.propertiesTreeOutline.appendChild(item);}
  1244. return;}
  1245. var generatedShorthands={};for(var i=0;i<allProperties.length;++i){var property=allProperties[i];var isShorthand=!!WebInspector.CSSMetadata.cssPropertiesMetainfo.longhands(property.name);var shorthands=isShorthand?null:WebInspector.CSSMetadata.cssPropertiesMetainfo.shorthands(property.name);var shorthandPropertyAvailable=false;for(var j=0;shorthands&&!shorthandPropertyAvailable&&j<shorthands.length;++j){var shorthand=shorthands[j];if(shorthand in generatedShorthands){shorthandPropertyAvailable=true;continue;}
  1246. if(style.getLiveProperty(shorthand)){shorthandPropertyAvailable=true;continue;}
  1247. if(!style.shorthandValue(shorthand)){shorthandPropertyAvailable=false;continue;}
  1248. var shorthandProperty=new WebInspector.CSSProperty(style,style.allProperties.length,shorthand,style.shorthandValue(shorthand),false,false,true,true);var overloaded=property.inactive||this.styleRule.isPropertyOverloaded(property.name,true);var item=new WebInspector.StylePropertyTreeElement(this._parentPane,this.styleRule,shorthandProperty,true,false,overloaded);this.propertiesTreeOutline.appendChild(item);generatedShorthands[shorthand]=shorthandProperty;shorthandPropertyAvailable=true;}
  1249. if(shorthandPropertyAvailable)
  1250. continue;var inherited=this.isPropertyInherited(property.name);var overloaded=property.inactive||this.styleRule.isPropertyOverloaded(property.name,isShorthand);var item=new WebInspector.StylePropertyTreeElement(this._parentPane,this.styleRule,property,isShorthand,inherited,overloaded);this.propertiesTreeOutline.appendChild(item);}},_updateFilter:function()
  1251. {if(this.styleRule.isAttribute())
  1252. return;var regex=this._parentPane.filterRegex();var hideRule=regex&&!regex.test(this.element.textContent);this.element.classList.toggle("hidden",hideRule);if(hideRule)
  1253. return;var children=this.propertiesTreeOutline.children;for(var i=0;i<children.length;++i)
  1254. children[i]._updateFilter();if(this.styleRule.rule())
  1255. this._markSelectorHighlights();},_markSelectorMatches:function()
  1256. {var rule=this.styleRule.rule();if(!rule)
  1257. return;this._mediaListElement.classList.toggle("media-matches",this.styleRule.mediaMatches());if(!this.styleRule.hasMatchingSelectors()){this._selectorElement.className="selector";return;}
  1258. var selectors=rule.selectors;var fragment=createDocumentFragment();var currentMatch=0;var matchingSelectors=rule.matchingSelectors;for(var i=0;i<selectors.length;++i){if(i)
  1259. fragment.createTextChild(", ");var isSelectorMatching=matchingSelectors[currentMatch]===i;if(isSelectorMatching)
  1260. ++currentMatch;var matchingSelectorClass=isSelectorMatching?" selector-matches":"";var selectorElement=createElement("span");selectorElement.className="simple-selector"+matchingSelectorClass;if(rule.styleSheetId)
  1261. selectorElement._selectorIndex=i;selectorElement.textContent=selectors[i].value;fragment.appendChild(selectorElement);}
  1262. this._selectorElement.removeChildren();this._selectorElement.appendChild(fragment);this._markSelectorHighlights();},_markSelectorHighlights:function()
  1263. {var selectors=this._selectorElement.getElementsByClassName("simple-selector");var regex=this._parentPane.filterRegex();for(var i=0;i<selectors.length;++i){var selectorMatchesFilter=regex&®ex.test(selectors[i].textContent);selectors[i].classList.toggle("filter-match",selectorMatchesFilter);}},_checkWillCancelEditing:function()
  1264. {var willCauseCancelEditing=this._willCauseCancelEditing;delete this._willCauseCancelEditing;return willCauseCancelEditing;},_handleSelectorContainerClick:function(event)
  1265. {if(this._checkWillCancelEditing()||!this.editable)
  1266. return;if(event.target===this._selectorContainer){this.addNewBlankProperty(0).startEditing();event.consume(true);}},addNewBlankProperty:function(index)
  1267. {var property=this.styleRule.style().newBlankProperty(index);var item=new WebInspector.StylePropertyTreeElement(this._parentPane,this.styleRule,property,false,false,false);index=property.index;this.propertiesTreeOutline.insertChild(item,index);item.listItemElement.textContent="";item._newProperty=true;item.updateTitle();return item;},_handleEmptySpaceMouseDown:function()
  1268. {this._willCauseCancelEditing=this._parentPane._isEditingStyle;},_handleEmptySpaceClick:function(event)
  1269. {if(!this.editable)
  1270. return;if(!event.target.window().getSelection().isCollapsed)
  1271. return;if(this._checkWillCancelEditing())
  1272. return;if(event.target.classList.contains("header")||this.element.classList.contains("read-only")||event.target.enclosingNodeOrSelfWithClass("media")){event.consume();return;}
  1273. this.expand();this.addNewBlankProperty().startEditing();event.consume(true);},_handleMediaRuleClick:function(media,element,event)
  1274. {if(WebInspector.isBeingEdited(element))
  1275. return;var config=new WebInspector.InplaceEditor.Config(this._editingMediaCommitted.bind(this,media),this._editingMediaCancelled.bind(this,element),undefined,this._editingMediaBlurHandler.bind(this));WebInspector.InplaceEditor.startEditing(element,config);element.window().getSelection().setBaseAndExtent(element,0,element,1);this._parentPane._isEditingStyle=true;var parentMediaElement=element.enclosingNodeOrSelfWithClass("media");parentMediaElement.classList.add("editing-media");event.consume(true);},_editingMediaFinished:function(element)
  1276. {delete this._parentPane._isEditingStyle;var parentMediaElement=element.enclosingNodeOrSelfWithClass("media");parentMediaElement.classList.remove("editing-media");},_editingMediaCancelled:function(element)
  1277. {this._editingMediaFinished(element);this._markSelectorMatches();element.window().getSelection().collapse(element,0);},_editingMediaBlurHandler:function(editor,blurEvent)
  1278. {return true;},_editingMediaCommitted:function(media,element,newContent,oldContent,context,moveDirection)
  1279. {delete this._parentPane._isEditingStyle;this._editingMediaFinished(element);if(newContent)
  1280. newContent=newContent.trim();function successCallback(newMedia)
  1281. {this._parentPane._styleSheetMediaEdited(media,newMedia);this._parentPane._refreshUpdate(this);finishOperation.call(this);}
  1282. function finishOperation()
  1283. {delete this._parentPane._userOperation;this._editingMediaTextCommittedForTest();}
  1284. this._parentPane._userOperation=true;this._parentPane._target.cssModel.setMediaText(media,newContent,successCallback.bind(this),finishOperation.bind(this));},_editingMediaTextCommittedForTest:function(){},_handleSelectorClick:function(event)
  1285. {if(WebInspector.KeyboardShortcut.eventHasCtrlOrMeta((event))&&this.navigable&&event.target.classList.contains("simple-selector")){var index=event.target._selectorIndex;var target=this._parentPane._target;var rule=this.rule();var rawLocation=new WebInspector.CSSLocation(target,(rule.styleSheetId),rule.sourceURL,rule.lineNumberInSource(index),rule.columnNumberInSource(index));var uiLocation=WebInspector.cssWorkspaceBinding.rawLocationToUILocation(rawLocation);if(uiLocation)
  1286. WebInspector.Revealer.reveal(uiLocation);event.consume(true);return;}
  1287. this._startEditingOnMouseEvent();event.consume(true);},_startEditingOnMouseEvent:function()
  1288. {if(!this.editable)
  1289. return;if(!this.rule()&&this.propertiesTreeOutline.children.length===0){this.expand();this.addNewBlankProperty().startEditing();return;}
  1290. if(!this.rule())
  1291. return;this.startEditingSelector();},startEditingSelector:function()
  1292. {var element=this._selectorElement;if(WebInspector.isBeingEdited(element))
  1293. return;element.scrollIntoViewIfNeeded(false);element.textContent=element.textContent;var config=new WebInspector.InplaceEditor.Config(this.editingSelectorCommitted.bind(this),this.editingSelectorCancelled.bind(this),undefined,this._editingSelectorBlurHandler.bind(this));WebInspector.InplaceEditor.startEditing(this._selectorElement,config);element.window().getSelection().setBaseAndExtent(element,0,element,1);this._parentPane._isEditingStyle=true;this._parentPane._startEditingSelector(this);},setSelectorText:function(text)
  1294. {this._selectorElement.textContent=text;this._selectorElement.window().getSelection().setBaseAndExtent(this._selectorElement,0,this._selectorElement,1);},_editingSelectorBlurHandler:function(editor,blurEvent)
  1295. {if(!blurEvent.relatedTarget)
  1296. return true;var elementTreeOutline=blurEvent.relatedTarget.enclosingNodeOrSelfWithClass("elements-tree-outline");if(!elementTreeOutline)
  1297. return true;editor.focus();return false;},_moveEditorFromSelector:function(moveDirection)
  1298. {this._markSelectorMatches();if(!moveDirection)
  1299. return;if(moveDirection==="forward"){this.expand();var firstChild=this.propertiesTreeOutline.children[0];while(firstChild&&firstChild.inherited)
  1300. firstChild=firstChild.nextSibling;if(!firstChild)
  1301. this.addNewBlankProperty().startEditing();else
  1302. firstChild.startEditing(firstChild.nameElement);}else{var previousSection=this.previousEditableSibling();if(!previousSection)
  1303. return;previousSection.expand();previousSection.addNewBlankProperty().startEditing();}},editingSelectorCommitted:function(element,newContent,oldContent,context,moveDirection)
  1304. {this._editingSelectorEnded();if(newContent)
  1305. newContent=newContent.trim();if(newContent===oldContent){this._selectorElement.textContent=newContent;this._moveEditorFromSelector(moveDirection);return;}
  1306. function successCallback(newRule)
  1307. {var doesAffectSelectedNode=newRule.matchingSelectors.length>0;this.element.classList.toggle("no-affect",!doesAffectSelectedNode);var oldSelectorRange=this.rule().selectorRange;this.styleRule.updateRule(newRule);this._parentPane._refreshUpdate(this);this._parentPane._styleSheetRuleEdited(newRule,oldSelectorRange,newRule.selectorRange);finishOperationAndMoveEditor.call(this,moveDirection);}
  1308. function finishOperationAndMoveEditor(direction)
  1309. {delete this._parentPane._userOperation;this._moveEditorFromSelector(direction);this._editingSelectorCommittedForTest();}
  1310. this._parentPane._userOperation=true;var selectedNode=this._parentPane._node;this._parentPane._target.cssModel.setRuleSelector(this.rule(),selectedNode?selectedNode.id:0,newContent,successCallback.bind(this),finishOperationAndMoveEditor.bind(this,moveDirection));},_editingSelectorCommittedForTest:function(){},_updateRuleOrigin:function()
  1311. {this._selectorRefElement.removeChildren();this._selectorRefElement.appendChild(WebInspector.StylePropertiesSection._createRuleOriginNode(this._parentPane._target,this._parentPane._linkifier,this.rule()));},_editingSelectorEnded:function()
  1312. {delete this._parentPane._isEditingStyle;this._parentPane._finishEditingSelector();},editingSelectorCancelled:function()
  1313. {this._editingSelectorEnded();this._markSelectorMatches();},__proto__:WebInspector.Section.prototype}
  1314. WebInspector.StylePropertiesSection._createRuleOriginNode=function(target,linkifier,rule)
  1315. {if(!rule)
  1316. return createTextNode("");var firstMatchingIndex=rule.matchingSelectors&&rule.matchingSelectors.length?rule.matchingSelectors[0]:0;var ruleLocation=rule.selectors[firstMatchingIndex].range;var header=rule.styleSheetId?target.cssModel.styleSheetHeaderForId(rule.styleSheetId):null;if(ruleLocation&&rule.styleSheetId&&header&&header.resourceURL())
  1317. return WebInspector.StylePropertiesSection._linkifyRuleLocation(target,linkifier,rule.styleSheetId,ruleLocation);if(rule.isUserAgent)
  1318. return createTextNode(WebInspector.UIString("user agent stylesheet"));if(rule.isInjected)
  1319. return createTextNode(WebInspector.UIString("injected stylesheet"));if(rule.isViaInspector)
  1320. return createTextNode(WebInspector.UIString("via inspector"));if(header&&header.ownerNode){var link=WebInspector.DOMPresentationUtils.linkifyDeferredNodeReference(header.ownerNode);link.textContent="<style>…</style>";return link;}
  1321. return createTextNode("");}
  1322. WebInspector.StylePropertiesSection._linkifyRuleLocation=function(target,linkifier,styleSheetId,ruleLocation)
  1323. {var styleSheetHeader=target.cssModel.styleSheetHeaderForId(styleSheetId);var sourceURL=styleSheetHeader.resourceURL();var lineNumber=styleSheetHeader.lineNumberInSource(ruleLocation.startLine);var columnNumber=styleSheetHeader.columnNumberInSource(ruleLocation.startLine,ruleLocation.startColumn);var matchingSelectorLocation=new WebInspector.CSSLocation(target,styleSheetId,sourceURL,lineNumber,columnNumber);return linkifier.linkifyCSSLocation(matchingSelectorLocation);}
  1324. WebInspector.ComputedStylePropertiesSection=function(stylesPane,styleRule,matchedRuleCascade,animationProperties)
  1325. {WebInspector.Section.call(this,"");this.element.className="styles-section monospace read-only computed-style";this.headerElement.appendChild(WebInspector.ComputedStylePropertiesSection._showInheritedCheckbox());this._stylesPane=stylesPane;this.styleRule=styleRule;this._matchedRuleCascade=matchedRuleCascade;this._animationProperties=animationProperties;this._alwaysShowComputedProperties={"display":true,"height":true,"width":true};this._propertyTreeElements={};this._expandedPropertyNames={};}
  1326. WebInspector.ComputedStylePropertiesSection._showInheritedCheckbox=function()
  1327. {if(!WebInspector.ComputedStylePropertiesSection._showInheritedCheckboxElement){WebInspector.ComputedStylePropertiesSection._showInheritedCheckboxElement=WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Show inherited properties"),WebInspector.settings.showInheritedComputedStyleProperties,true);WebInspector.ComputedStylePropertiesSection._showInheritedCheckboxElement.classList.add("checkbox-with-label");}
  1328. return WebInspector.ComputedStylePropertiesSection._showInheritedCheckboxElement;}
  1329. WebInspector.ComputedStylePropertiesSection.prototype={collapse:function()
  1330. {},_isPropertyInherited:function(propertyName)
  1331. {var canonicalName=WebInspector.CSSMetadata.canonicalPropertyName(propertyName);return!(this._matchedRuleCascade.allUsedProperties().has(canonicalName))&&!(canonicalName in this._alwaysShowComputedProperties)&&!this._animationProperties.has(canonicalName);},update:function()
  1332. {this._expandedPropertyNames={};for(var name in this._propertyTreeElements){if(this._propertyTreeElements[name].expanded)
  1333. this._expandedPropertyNames[name]=true;}
  1334. this._propertyTreeElements={};this.propertiesTreeOutline.removeChildren();this.repopulate();},_updateFilter:function()
  1335. {var children=this.propertiesTreeOutline.children;for(var i=0;i<children.length;++i)
  1336. children[i]._updateFilter();},onpopulate:function()
  1337. {var style=this.styleRule.style();if(!style)
  1338. return;var uniqueProperties=[];var allProperties=style.allProperties;for(var i=0;i<allProperties.length;++i)
  1339. uniqueProperties.push(allProperties[i]);uniqueProperties.sort(propertySorter);this._propertyTreeElements={};var showInherited=WebInspector.settings.showInheritedComputedStyleProperties.get();for(var i=0;i<uniqueProperties.length;++i){var property=uniqueProperties[i];var inherited=this._isPropertyInherited(property.name);if(!showInherited&&inherited)
  1340. continue;var item=new WebInspector.ComputedStylePropertyTreeElement(this._stylesPane,this.styleRule,property,inherited);this.propertiesTreeOutline.appendChild(item);this._propertyTreeElements[property.name]=item;}
  1341. function propertySorter(a,b)
  1342. {return a.name.compareTo(b.name);}},_rebuildComputedTrace:function()
  1343. {for(var property of this._animationProperties.keys()){var treeElement=this._propertyTreeElements[property.toLowerCase()];if(treeElement){var fragment=createDocumentFragment();var name=fragment.createChild("span");name.textContent=WebInspector.UIString("Animation")+" "+this._animationProperties.get(property);treeElement.appendChild(new TreeElement(fragment,null,false));}}
  1344. for(var model of this._matchedRuleCascade.sectionModels()){var properties=model.style().allProperties;for(var j=0;j<properties.length;++j){var property=properties[j];if(property.disabled)
  1345. continue;if(model.inherited()&&!WebInspector.CSSMetadata.isPropertyInherited(property.name))
  1346. continue;var treeElement=this._propertyTreeElements[property.name.toLowerCase()];if(treeElement){var fragment=createDocumentFragment();var selector=fragment.createChild("span");selector.style.color="gray";selector.textContent=model.selectorText();fragment.createTextChild(" - "+property.value+" ");var subtitle=fragment.createChild("span");subtitle.style.float="right";subtitle.appendChild(WebInspector.StylePropertiesSection._createRuleOriginNode(this._stylesPane._target,this._stylesPane._linkifier,model.rule()));var childElement=new TreeElement(fragment,null,false);treeElement.appendChild(childElement);if(property.inactive||model.isPropertyOverloaded(property.name))
  1347. childElement.listItemElement.classList.add("overloaded");if(!property.parsedOk){childElement.listItemElement.classList.add("not-parsed-ok");childElement.listItemElement.insertBefore(WebInspector.StylesSidebarPane.createExclamationMark(property),childElement.listItemElement.firstChild);if(WebInspector.StylesSidebarPane._ignoreErrorsForProperty(property))
  1348. childElement.listItemElement.classList.add("has-ignorable-error");}}}}
  1349. for(var name in this._expandedPropertyNames){if(name in this._propertyTreeElements)
  1350. this._propertyTreeElements[name].expand();}},__proto__:WebInspector.Section.prototype}
  1351. WebInspector.BlankStylePropertiesSection=function(stylesPane,defaultSelectorText,styleSheetId,ruleLocation,insertAfterStyleRule)
  1352. {var styleSheetHeader=WebInspector.cssModel.styleSheetHeaderForId(styleSheetId);var dummyCascade=new WebInspector.SectionCascade();var blankSectionModel=dummyCascade.appendModelFromStyle(WebInspector.CSSStyleDeclaration.createDummyStyle(),defaultSelectorText);blankSectionModel.setEditable(true);WebInspector.StylePropertiesSection.call(this,stylesPane,blankSectionModel);this._ruleLocation=ruleLocation;this._styleSheetId=styleSheetId;this._selectorRefElement.removeChildren();this._selectorRefElement.appendChild(WebInspector.StylePropertiesSection._linkifyRuleLocation(this._parentPane._target,this._parentPane._linkifier,styleSheetId,this._actualRuleLocation()));if(insertAfterStyleRule)
  1353. this._createMediaList(insertAfterStyleRule.media());this._insertAfterStyleRule=insertAfterStyleRule;this.element.classList.add("blank-section");}
  1354. WebInspector.BlankStylePropertiesSection.prototype={_actualRuleLocation:function()
  1355. {var prefix=this._rulePrefix();var lines=prefix.split("\n");var editRange=new WebInspector.TextRange(0,0,lines.length-1,lines.peekLast().length);return this._ruleLocation.rebaseAfterTextEdit(WebInspector.TextRange.createFromLocation(0,0),editRange);},_rulePrefix:function()
  1356. {return this._ruleLocation.startLine===0&&this._ruleLocation.startColumn===0?"":"\n\n";},get isBlank()
  1357. {return!this._normal;},expand:function()
  1358. {if(!this.isBlank)
  1359. WebInspector.StylePropertiesSection.prototype.expand.call(this);},editingSelectorCommitted:function(element,newContent,oldContent,context,moveDirection)
  1360. {if(!this.isBlank){WebInspector.StylePropertiesSection.prototype.editingSelectorCommitted.call(this,element,newContent,oldContent,context,moveDirection);return;}
  1361. function successCallback(newRule)
  1362. {var doesSelectorAffectSelectedNode=newRule.matchingSelectors.length>0;this._makeNormal(newRule);if(!doesSelectorAffectSelectedNode)
  1363. this.element.classList.add("no-affect");var ruleTextLines=ruleText.split("\n");var startLine=this._ruleLocation.startLine;var startColumn=this._ruleLocation.startColumn;var newRange=new WebInspector.TextRange(startLine,startColumn,startLine+ruleTextLines.length-1,startColumn+ruleTextLines[ruleTextLines.length-1].length);this._parentPane._styleSheetRuleEdited(newRule,this._ruleLocation,newRange);this._updateRuleOrigin();this.expand();if(this.element.parentElement)
  1364. this._moveEditorFromSelector(moveDirection);delete this._parentPane._userOperation;this._editingSelectorEnded();this._markSelectorMatches();this._editingSelectorCommittedForTest();}
  1365. function failureCallback()
  1366. {this.editingSelectorCancelled();this._editingSelectorCommittedForTest();}
  1367. if(newContent)
  1368. newContent=newContent.trim();this._parentPane._userOperation=true;var cssModel=this._parentPane._target.cssModel;var ruleText=this._rulePrefix()+newContent+" {}";cssModel.addRule(this._styleSheetId,this._parentPane._node,ruleText,this._ruleLocation,successCallback.bind(this),failureCallback.bind(this));},editingSelectorCancelled:function()
  1369. {delete this._parentPane._userOperation;if(!this.isBlank){WebInspector.StylePropertiesSection.prototype.editingSelectorCancelled.call(this);return;}
  1370. this._editingSelectorEnded();this._parentPane.removeSection(this);},_makeNormal:function(newRule)
  1371. {this.element.classList.remove("blank-section");var model=this._insertAfterStyleRule.cascade().insertModelFromRule(newRule,this._insertAfterStyleRule);this.styleRule=model;this._normal=true;},__proto__:WebInspector.StylePropertiesSection.prototype}
  1372. WebInspector.StylePropertyTreeElementBase=function(styleRule,property,inherited,overloaded,hasChildren)
  1373. {this._styleRule=styleRule;this.property=property;this._inherited=inherited;this._overloaded=overloaded;TreeElement.call(this,"",null,hasChildren);this.selectable=false;}
  1374. WebInspector.StylePropertyTreeElementBase.prototype={style:function()
  1375. {return this._styleRule.style();},node:function()
  1376. {return null;},editablePane:function()
  1377. {return null;},parentPane:function()
  1378. {throw"Not implemented";},get inherited()
  1379. {return this._inherited;},hasIgnorableError:function()
  1380. {return!this.parsedOk&&WebInspector.StylesSidebarPane._ignoreErrorsForProperty(this.property);},set inherited(x)
  1381. {if(x===this._inherited)
  1382. return;this._inherited=x;this.updateState();},get overloaded()
  1383. {return this._overloaded;},set overloaded(x)
  1384. {if(x===this._overloaded)
  1385. return;this._overloaded=x;this.updateState();},get disabled()
  1386. {return this.property.disabled;},get name()
  1387. {if(!this.disabled||!this.property.text)
  1388. return this.property.name;var text=this.property.text;var index=text.indexOf(":");if(index<1)
  1389. return this.property.name;text=text.substring(0,index).trim();if(text.startsWith("/*"))
  1390. text=text.substring(2).trim();return text;},get value()
  1391. {if(!this.disabled||!this.property.text)
  1392. return this.property.value;var match=this.property.text.match(/(.*);\s*/);if(!match||!match[1])
  1393. return this.property.value;var text=match[1];var index=text.indexOf(":");if(index<1)
  1394. return this.property.value;return text.substring(index+1).trim();},get parsedOk()
  1395. {return this.property.parsedOk;},onattach:function()
  1396. {this.updateTitle();},updateTitle:function()
  1397. {var value=this.value;this.updateState();var nameElement=createElement("span");nameElement.className="webkit-css-property";nameElement.textContent=this.name;nameElement.title=this.property.propertyText;this.nameElement=nameElement;this._expandElement=createElement("span");this._expandElement.className="expand-element";var valueElement=createElement("span");valueElement.className="value";this.valueElement=valueElement;function processValue(regex,processor,nextProcessor,valueText)
  1398. {var container=createDocumentFragment();var items=valueText.replace(regex,"\0$1\0").split("\0");for(var i=0;i<items.length;++i){if((i%2)===0){if(nextProcessor)
  1399. container.appendChild(nextProcessor(items[i]));else
  1400. container.createTextChild(items[i]);}else{var processedNode=processor(items[i]);if(processedNode)
  1401. container.appendChild(processedNode);}}
  1402. return container;}
  1403. function urlRegex(value)
  1404. {if(/url\(\s*'.*\s*'\s*\)/.test(value))
  1405. return/url\(\s*('.+')\s*\)/g;if(/url\(\s*".*\s*"\s*\)/.test(value))
  1406. return/url\(\s*(".+")\s*\)/g;return/url\(\s*([^)]+)\s*\)/g;}
  1407. function linkifyURL(url)
  1408. {var hrefUrl=url;var match=hrefUrl.match(/['"]?([^'"]+)/);if(match)
  1409. hrefUrl=match[1];var container=createDocumentFragment();container.createTextChild("url(");if(this._styleRule.rule()&&this._styleRule.rule().resourceURL())
  1410. hrefUrl=WebInspector.ParsedURL.completeURL(this._styleRule.rule().resourceURL(),hrefUrl);else if(this.node())
  1411. hrefUrl=this.node().resolveURL(hrefUrl);var hasResource=hrefUrl&&!!WebInspector.resourceForURL(hrefUrl);container.appendChild(WebInspector.linkifyURLAsNode(hrefUrl||url,url,undefined,!hasResource));container.createTextChild(")");return container;}
  1412. if(value){var colorProcessor=processValue.bind(null,WebInspector.StylesSidebarPane._colorRegex,this._processColor.bind(this,nameElement,valueElement),null);valueElement.appendChild(processValue(urlRegex(value),linkifyURL.bind(this),WebInspector.CSSMetadata.isColorAwareProperty(this.name)&&this.parsedOk?colorProcessor:null,value));}
  1413. this.listItemElement.removeChildren();nameElement.normalize();valueElement.normalize();if(!this.treeOutline)
  1414. return;this.listItemElement.createChild("span","styles-clipboard-only").createTextChild(this.disabled?"  /* ":"  ");this.listItemElement.appendChild(nameElement);this.listItemElement.createTextChild(": ");this.listItemElement.appendChild(this._expandElement);this.listItemElement.appendChild(valueElement);this.listItemElement.createTextChild(";");if(this.disabled)
  1415. this.listItemElement.createChild("span","styles-clipboard-only").createTextChild(" */");if(!this.parsedOk){this.hasChildren=false;this.listItemElement.classList.add("not-parsed-ok");this.listItemElement.insertBefore(WebInspector.StylesSidebarPane.createExclamationMark(this.property),this.listItemElement.firstChild);}
  1416. if(this.property.inactive)
  1417. this.listItemElement.classList.add("inactive");this._updateFilter();},_updateFilter:function()
  1418. {var regEx=this.parentPane().filterRegex();this.listItemElement.classList.toggle("filter-match",!!regEx&&(regEx.test(this.property.name)||regEx.test(this.property.value)));},_processColor:function(nameElement,valueElement,text)
  1419. {var color=WebInspector.Color.parse(text);if(!color)
  1420. return createTextNode(text);var format=WebInspector.StylesSidebarPane._colorFormat(color);var spectrumHelper=this.editablePane()&&this.editablePane()._spectrumHelper;var spectrum=spectrumHelper?spectrumHelper.spectrum():null;var isEditable=!!(this._styleRule&&this._styleRule.editable());var colorSwatch=new WebInspector.ColorSwatch(!isEditable);colorSwatch.setColorString(text);colorSwatch.element.addEventListener("click",swatchClick.bind(this),false);var scrollerElement;var boundSpectrumChanged=spectrumChanged.bind(this);var boundSpectrumHidden=spectrumHidden.bind(this);function spectrumChanged(event)
  1421. {var colorString=(event.data);spectrum.displayText=colorString;colorValueElement.textContent=colorString;colorSwatch.setColorString(colorString);this.applyStyleText(nameElement.textContent+": "+valueElement.textContent,false,false,false);}
  1422. function spectrumHidden(event)
  1423. {if(scrollerElement)
  1424. scrollerElement.removeEventListener("scroll",repositionSpectrum,false);var commitEdit=event.data;var propertyText=!commitEdit&&this.originalPropertyText?this.originalPropertyText:(nameElement.textContent+": "+valueElement.textContent);this.applyStyleText(propertyText,true,true,false);spectrum.removeEventListener(WebInspector.Spectrum.Events.ColorChanged,boundSpectrumChanged);spectrumHelper.removeEventListener(WebInspector.SpectrumPopupHelper.Events.Hidden,boundSpectrumHidden);delete this.editablePane()._isEditingStyle;delete this.originalPropertyText;}
  1425. function repositionSpectrum()
  1426. {spectrumHelper.reposition(colorSwatch.element);}
  1427. function swatchClick(e)
  1428. {e.consume(true);if(!spectrumHelper||e.shiftKey){changeColorDisplay();return;}
  1429. if(!isEditable)
  1430. return;var visible=spectrumHelper.toggle(colorSwatch.element,color,format);if(visible){spectrum.displayText=color.asString(format);this.originalPropertyText=this.property.propertyText;this.editablePane()._isEditingStyle=true;spectrum.addEventListener(WebInspector.Spectrum.Events.ColorChanged,boundSpectrumChanged);spectrumHelper.addEventListener(WebInspector.SpectrumPopupHelper.Events.Hidden,boundSpectrumHidden);scrollerElement=colorSwatch.element.enclosingNodeOrSelfWithClass("style-panes-wrapper");if(scrollerElement)
  1431. scrollerElement.addEventListener("scroll",repositionSpectrum,false);else
  1432. console.error("Unable to handle color picker scrolling");}}
  1433. var colorValueElement=createElement("span");if(format===WebInspector.Color.Format.Original)
  1434. colorValueElement.textContent=text;else
  1435. colorValueElement.textContent=color.asString(format);function nextFormat(curFormat)
  1436. {var cf=WebInspector.Color.Format;switch(curFormat){case cf.Original:return!color.hasAlpha()?cf.RGB:cf.RGBA;case cf.RGB:case cf.RGBA:return!color.hasAlpha()?cf.HSL:cf.HSLA;case cf.HSL:case cf.HSLA:if(color.nickname())
  1437. return cf.Nickname;if(!color.hasAlpha())
  1438. return color.canBeShortHex()?cf.ShortHEX:cf.HEX;else
  1439. return cf.Original;case cf.ShortHEX:return cf.HEX;case cf.HEX:return cf.Original;case cf.Nickname:if(!color.hasAlpha())
  1440. return color.canBeShortHex()?cf.ShortHEX:cf.HEX;else
  1441. return cf.Original;default:return cf.RGBA;}}
  1442. function changeColorDisplay()
  1443. {do{format=nextFormat(format);var currentValue=color.asString(format);}while(currentValue===colorValueElement.textContent);colorValueElement.textContent=currentValue;}
  1444. var container=createElement("nobr");container.appendChild(colorSwatch.element);container.appendChild(colorValueElement);return container;},updateState:function()
  1445. {if(!this.listItemElement)
  1446. return;if(this.style().isPropertyImplicit(this.name))
  1447. this.listItemElement.classList.add("implicit");else
  1448. this.listItemElement.classList.remove("implicit");if(this.hasIgnorableError())
  1449. this.listItemElement.classList.add("has-ignorable-error");else
  1450. this.listItemElement.classList.remove("has-ignorable-error");if(this.inherited)
  1451. this.listItemElement.classList.add("inherited");else
  1452. this.listItemElement.classList.remove("inherited");if(this.overloaded)
  1453. this.listItemElement.classList.add("overloaded");else
  1454. this.listItemElement.classList.remove("overloaded");if(this.disabled)
  1455. this.listItemElement.classList.add("disabled");else
  1456. this.listItemElement.classList.remove("disabled");},__proto__:TreeElement.prototype}
  1457. WebInspector.ComputedStylePropertyTreeElement=function(stylesPane,styleRule,property,inherited)
  1458. {WebInspector.StylePropertyTreeElementBase.call(this,styleRule,property,inherited,false,false);this._stylesPane=stylesPane;}
  1459. WebInspector.ComputedStylePropertyTreeElement.prototype={editablePane:function()
  1460. {return null;},parentPane:function()
  1461. {return this._stylesPane;},_updateFilter:function()
  1462. {var regEx=this.parentPane().filterRegex();var matched=!!regEx&&(!regEx.test(this.property.name)&&!regEx.test(this.property.value));this.listItemElement.classList.toggle("hidden",matched);if(this.childrenListElement)
  1463. this.childrenListElement.classList.toggle("hidden",matched);},__proto__:WebInspector.StylePropertyTreeElementBase.prototype}
  1464. WebInspector.StylePropertyTreeElement=function(stylesPane,styleRule,property,isShorthand,inherited,overloaded)
  1465. {WebInspector.StylePropertyTreeElementBase.call(this,styleRule,property,inherited,overloaded,isShorthand);this._parentPane=stylesPane;this.isShorthand=isShorthand;this._applyStyleThrottler=new WebInspector.Throttler(0);}
  1466. WebInspector.StylePropertyTreeElement.Context;WebInspector.StylePropertyTreeElement.prototype={node:function()
  1467. {return this._parentPane._node;},editablePane:function()
  1468. {return this._parentPane;},parentPane:function()
  1469. {return this._parentPane;},section:function()
  1470. {return this.treeOutline&&this.treeOutline.section;},_updatePane:function()
  1471. {var section=this.section();if(section&§ion._parentPane)
  1472. section._parentPane._refreshUpdate(section);},_applyNewStyle:function(newStyle)
  1473. {var oldStyleRange=(this.style().range);var newStyleRange=(newStyle.range);this._styleRule.updateStyleDeclaration(newStyle);if(this._styleRule.rule())
  1474. this._parentPane._styleSheetRuleEdited((this._styleRule.rule()),oldStyleRange,newStyleRange);},toggleEnabled:function(event)
  1475. {var disabled=!event.target.checked;function callback(newStyle)
  1476. {delete this._parentPane._userOperation;if(!newStyle)
  1477. return;this._applyNewStyle(newStyle);var section=this.section();this._updatePane();this.styleTextAppliedForTest();}
  1478. this._parentPane._userOperation=true;this.property.setDisabled(disabled,callback.bind(this));event.consume();},onpopulate:function()
  1479. {if(this.children.length||!this.isShorthand)
  1480. return;var longhandProperties=this.style().longhandProperties(this.name);for(var i=0;i<longhandProperties.length;++i){var name=longhandProperties[i].name;var inherited=false;var overloaded=false;var section=this.section();if(section){inherited=section.isPropertyInherited(name);overloaded=section.styleRule.isPropertyOverloaded(name);}
  1481. var liveProperty=this.style().getLiveProperty(name);if(!liveProperty)
  1482. continue;var item=new WebInspector.StylePropertyTreeElement(this._parentPane,this._styleRule,liveProperty,false,inherited,overloaded);this.appendChild(item);}},onattach:function()
  1483. {WebInspector.StylePropertyTreeElementBase.prototype.onattach.call(this);this.listItemElement.addEventListener("mousedown",this._mouseDown.bind(this));this.listItemElement.addEventListener("mouseup",this._resetMouseDownElement.bind(this));this.listItemElement.addEventListener("click",this._mouseClick.bind(this));},_mouseDown:function(event)
  1484. {if(this._parentPane){this._parentPane._mouseDownTreeElement=this;this._parentPane._mouseDownTreeElementIsName=this._isNameElement((event.target));this._parentPane._mouseDownTreeElementIsValue=this._isValueElement((event.target));}},_resetMouseDownElement:function()
  1485. {if(this._parentPane){delete this._parentPane._mouseDownTreeElement;delete this._parentPane._mouseDownTreeElementIsName;delete this._parentPane._mouseDownTreeElementIsValue;}},updateTitle:function()
  1486. {WebInspector.StylePropertyTreeElementBase.prototype.updateTitle.call(this);if(this.parsedOk&&this.section()&&this.parent.root){var enabledCheckboxElement=createElement("input");enabledCheckboxElement.className="enabled-button";enabledCheckboxElement.type="checkbox";enabledCheckboxElement.checked=!this.disabled;enabledCheckboxElement.addEventListener("click",this.toggleEnabled.bind(this),false);this.listItemElement.insertBefore(enabledCheckboxElement,this.listItemElement.firstChild);}},_mouseClick:function(event)
  1487. {if(!event.target.window().getSelection().isCollapsed)
  1488. return;event.consume(true);if(event.target===this.listItemElement){var section=this.section();if(!section||!section.editable)
  1489. return;if(section._checkWillCancelEditing())
  1490. return;section.addNewBlankProperty(this.property.index+1).startEditing();return;}
  1491. if(WebInspector.KeyboardShortcut.eventHasCtrlOrMeta((event))&&this.section().navigable){this._navigateToSource((event.target));return;}
  1492. this.startEditing((event.target));},_navigateToSource:function(element)
  1493. {console.assert(this.section().navigable);var propertyNameClicked=element===this.nameElement;var uiLocation=WebInspector.cssWorkspaceBinding.propertyUILocation(this.property,propertyNameClicked);if(uiLocation)
  1494. WebInspector.Revealer.reveal(uiLocation);},_isNameElement:function(element)
  1495. {return element.enclosingNodeOrSelfWithClass("webkit-css-property")===this.nameElement;},_isValueElement:function(element)
  1496. {return!!element.enclosingNodeOrSelfWithClass("value");},startEditing:function(selectElement)
  1497. {if(this.parent.isShorthand)
  1498. return;if(selectElement===this._expandElement)
  1499. return;var section=this.section();if(section&&!section.editable)
  1500. return;if(!selectElement)
  1501. selectElement=this.nameElement;else
  1502. selectElement=selectElement.enclosingNodeOrSelfWithClass("webkit-css-property")||selectElement.enclosingNodeOrSelfWithClass("value");if(WebInspector.isBeingEdited(selectElement))
  1503. return;var isEditingName=selectElement===this.nameElement;if(!isEditingName)
  1504. this.valueElement.textContent=restoreURLs(this.valueElement.textContent,this.value);function restoreURLs(fieldValue,modelValue)
  1505. {const urlRegex=/\b(url\([^)]*\))/g;var splitFieldValue=fieldValue.split(urlRegex);if(splitFieldValue.length===1)
  1506. return fieldValue;var modelUrlRegex=new RegExp(urlRegex);for(var i=1;i<splitFieldValue.length;i+=2){var match=modelUrlRegex.exec(modelValue);if(match)
  1507. splitFieldValue[i]=match[0];}
  1508. return splitFieldValue.join("");}
  1509. var context={expanded:this.expanded,hasChildren:this.hasChildren,isEditingName:isEditingName,previousContent:selectElement.textContent};this.hasChildren=false;if(selectElement.parentElement)
  1510. selectElement.parentElement.classList.add("child-editing");selectElement.textContent=selectElement.textContent;function pasteHandler(context,event)
  1511. {var data=event.clipboardData.getData("Text");if(!data)
  1512. return;var colonIdx=data.indexOf(":");if(colonIdx<0)
  1513. return;var name=data.substring(0,colonIdx).trim();var value=data.substring(colonIdx+1).trim();event.preventDefault();if(!("originalName"in context)){context.originalName=this.nameElement.textContent;context.originalValue=this.valueElement.textContent;}
  1514. this.property.name=name;this.property.value=value;this.nameElement.textContent=name;this.valueElement.textContent=value;this.nameElement.normalize();this.valueElement.normalize();this.editingCommitted(event.target.textContent,context,"forward");}
  1515. function blurListener(context,event)
  1516. {var treeElement=this._parentPane._mouseDownTreeElement;var moveDirection="";if(treeElement===this){if(isEditingName&&this._parentPane._mouseDownTreeElementIsValue)
  1517. moveDirection="forward";if(!isEditingName&&this._parentPane._mouseDownTreeElementIsName)
  1518. moveDirection="backward";}
  1519. this.editingCommitted(event.target.textContent,context,moveDirection);}
  1520. delete this.originalPropertyText;this._parentPane._isEditingStyle=true;if(selectElement.parentElement)
  1521. selectElement.parentElement.scrollIntoViewIfNeeded(false);var applyItemCallback=!isEditingName?this._applyFreeFlowStyleTextEdit.bind(this):undefined;this._prompt=new WebInspector.StylesSidebarPane.CSSPropertyPrompt(isEditingName?WebInspector.CSSMetadata.cssPropertiesMetainfo:WebInspector.CSSMetadata.keywordsForProperty(this.nameElement.textContent),this,isEditingName);this._prompt.setAutocompletionTimeout(0);if(applyItemCallback){this._prompt.addEventListener(WebInspector.TextPrompt.Events.ItemApplied,applyItemCallback,this);this._prompt.addEventListener(WebInspector.TextPrompt.Events.ItemAccepted,applyItemCallback,this);}
  1522. var proxyElement=this._prompt.attachAndStartEditing(selectElement,blurListener.bind(this,context));proxyElement.addEventListener("keydown",this._editingNameValueKeyDown.bind(this,context),false);proxyElement.addEventListener("keypress",this._editingNameValueKeyPress.bind(this,context),false);proxyElement.addEventListener("input",this._editingNameValueInput.bind(this,context),false);if(isEditingName)
  1523. proxyElement.addEventListener("paste",pasteHandler.bind(this,context),false);selectElement.window().getSelection().setBaseAndExtent(selectElement,0,selectElement,1);},_editingNameValueKeyDown:function(context,event)
  1524. {if(event.handled)
  1525. return;var result;if(isEnterKey(event)){event.preventDefault();result="forward";}else if(event.keyCode===WebInspector.KeyboardShortcut.Keys.Esc.code||event.keyIdentifier==="U+001B")
  1526. result="cancel";else if(!context.isEditingName&&this._newProperty&&event.keyCode===WebInspector.KeyboardShortcut.Keys.Backspace.code){var selection=event.target.window().getSelection();if(selection.isCollapsed&&!selection.focusOffset){event.preventDefault();result="backward";}}else if(event.keyIdentifier==="U+0009"){result=event.shiftKey?"backward":"forward";event.preventDefault();}
  1527. if(result){switch(result){case"cancel":this.editingCancelled(null,context);break;case"forward":case"backward":this.editingCommitted(event.target.textContent,context,result);break;}
  1528. event.consume();return;}},_editingNameValueKeyPress:function(context,event)
  1529. {function shouldCommitValueSemicolon(text,cursorPosition)
  1530. {var openQuote="";for(var i=0;i<cursorPosition;++i){var ch=text[i];if(ch==="\\"&&openQuote!=="")
  1531. ++i;else if(!openQuote&&(ch==="\""||ch==="'"))
  1532. openQuote=ch;else if(openQuote===ch)
  1533. openQuote="";}
  1534. return!openQuote;}
  1535. var keyChar=String.fromCharCode(event.charCode);var isFieldInputTerminated=(context.isEditingName?keyChar===":":keyChar===";"&&shouldCommitValueSemicolon(event.target.textContent,event.target.selectionLeftOffset()));if(isFieldInputTerminated){event.consume(true);this.editingCommitted(event.target.textContent,context,"forward");return;}},_editingNameValueInput:function(context,event)
  1536. {if(!context.isEditingName&&(!this._parentPane._node.pseudoType()||this.name!=="content"))
  1537. this._applyFreeFlowStyleTextEdit();},_applyFreeFlowStyleTextEdit:function()
  1538. {var valueText=this.valueElement.textContent;if(valueText.indexOf(";")===-1)
  1539. this.applyStyleText(this.nameElement.textContent+": "+valueText,false,false,false);},kickFreeFlowStyleEditForTest:function()
  1540. {this._applyFreeFlowStyleTextEdit();},editingEnded:function(context)
  1541. {this._resetMouseDownElement();this.hasChildren=context.hasChildren;if(context.expanded)
  1542. this.expand();var editedElement=context.isEditingName?this.nameElement:this.valueElement;if(editedElement.parentElement)
  1543. editedElement.parentElement.classList.remove("child-editing");delete this._parentPane._isEditingStyle;},editingCancelled:function(element,context)
  1544. {this._removePrompt();this._revertStyleUponEditingCanceled(this.originalPropertyText);this.editingEnded(context);},_revertStyleUponEditingCanceled:function(originalPropertyText)
  1545. {if(typeof originalPropertyText==="string"){delete this.originalPropertyText;this.applyStyleText(originalPropertyText,true,false,true);}else{if(this._newProperty)
  1546. this.treeOutline.removeChild(this);else
  1547. this.updateTitle();}},_findSibling:function(moveDirection)
  1548. {var target=this;do{target=(moveDirection==="forward"?target.nextSibling:target.previousSibling);}while(target&&target.inherited);return target;},editingCommitted:function(userInput,context,moveDirection)
  1549. {this._removePrompt();this.editingEnded(context);var isEditingName=context.isEditingName;var createNewProperty,moveToPropertyName,moveToSelector;var isDataPasted="originalName"in context;var isDirtyViaPaste=isDataPasted&&(this.nameElement.textContent!==context.originalName||this.valueElement.textContent!==context.originalValue);var isPropertySplitPaste=isDataPasted&&isEditingName&&this.valueElement.textContent!==context.originalValue;var moveTo=this;var moveToOther=(isEditingName^(moveDirection==="forward"));var abandonNewProperty=this._newProperty&&!userInput&&(moveToOther||isEditingName);if(moveDirection==="forward"&&(!isEditingName||isPropertySplitPaste)||moveDirection==="backward"&&isEditingName){moveTo=moveTo._findSibling(moveDirection);if(moveTo)
  1550. moveToPropertyName=moveTo.name;else if(moveDirection==="forward"&&(!this._newProperty||userInput))
  1551. createNewProperty=true;else if(moveDirection==="backward")
  1552. moveToSelector=true;}
  1553. var moveToIndex=moveTo&&this.treeOutline?this.treeOutline.children.indexOf(moveTo):-1;var blankInput=/^\s*$/.test(userInput);var shouldCommitNewProperty=this._newProperty&&(isPropertySplitPaste||moveToOther||(!moveDirection&&!isEditingName)||(isEditingName&&blankInput));var section=(this.section());if(((userInput!==context.previousContent||isDirtyViaPaste)&&!this._newProperty)||shouldCommitNewProperty){section._afterUpdate=moveToNextCallback.bind(this,this._newProperty,!blankInput,section);var propertyText;if(blankInput||(this._newProperty&&/^\s*$/.test(this.valueElement.textContent)))
  1554. propertyText="";else{if(isEditingName)
  1555. propertyText=userInput+": "+this.property.value;else
  1556. propertyText=this.property.name+": "+userInput;}
  1557. this.applyStyleText(propertyText,true,true,false);}else{if(isEditingName)
  1558. this.property.name=userInput;else
  1559. this.property.value=userInput;if(!isDataPasted&&!this._newProperty)
  1560. this.updateTitle();moveToNextCallback.call(this,this._newProperty,false,section);}
  1561. function moveToNextCallback(alreadyNew,valueChanged,section)
  1562. {if(!moveDirection)
  1563. return;if(moveTo&&moveTo.parent){moveTo.startEditing(!isEditingName?moveTo.nameElement:moveTo.valueElement);return;}
  1564. if(moveTo&&!moveTo.parent){var propertyElements=section.propertiesTreeOutline.children;if(moveDirection==="forward"&&blankInput&&!isEditingName)
  1565. --moveToIndex;if(moveToIndex>=propertyElements.length&&!this._newProperty)
  1566. createNewProperty=true;else{var treeElement=moveToIndex>=0?propertyElements[moveToIndex]:null;if(treeElement){var elementToEdit=!isEditingName||isPropertySplitPaste?treeElement.nameElement:treeElement.valueElement;if(alreadyNew&&blankInput)
  1567. elementToEdit=moveDirection==="forward"?treeElement.nameElement:treeElement.valueElement;treeElement.startEditing(elementToEdit);return;}else if(!alreadyNew)
  1568. moveToSelector=true;}}
  1569. if(createNewProperty){if(alreadyNew&&!valueChanged&&(isEditingName^(moveDirection==="backward")))
  1570. return;section.addNewBlankProperty().startEditing();return;}
  1571. if(abandonNewProperty){moveTo=this._findSibling(moveDirection);var sectionToEdit=(moveTo||moveDirection==="backward")?section:section.nextEditableSibling();if(sectionToEdit){if(sectionToEdit.rule())
  1572. sectionToEdit.startEditingSelector();else
  1573. sectionToEdit._moveEditorFromSelector(moveDirection);}
  1574. return;}
  1575. if(moveToSelector){if(section.rule())
  1576. section.startEditingSelector();else
  1577. section._moveEditorFromSelector(moveDirection);}}},_removePrompt:function()
  1578. {if(this._prompt){this._prompt.detach();delete this._prompt;}},_hasBeenModifiedIncrementally:function()
  1579. {return typeof this.originalPropertyText==="string"||(!!this.property.propertyText&&this._newProperty);},styleTextAppliedForTest:function()
  1580. {},applyStyleText:function(styleText,updateInterface,majorChange,isRevert)
  1581. {this._applyStyleThrottler.schedule(this._innerApplyStyleText.bind(this,styleText,updateInterface,majorChange,isRevert));},_innerApplyStyleText:function(styleText,updateInterface,majorChange,isRevert,finishedCallback)
  1582. {function userOperationFinishedCallback(parentPane,updateInterface)
  1583. {if(updateInterface)
  1584. delete parentPane._userOperation;finishedCallback();}
  1585. if(!isRevert&&!updateInterface&&!this._hasBeenModifiedIncrementally()){this.originalPropertyText=this.property.propertyText;}
  1586. if(!this.treeOutline)
  1587. return;var section=this.section();styleText=styleText.replace(/\s/g," ").trim();var styleTextLength=styleText.length;if(!styleTextLength&&updateInterface&&!isRevert&&this._newProperty&&!this._hasBeenModifiedIncrementally()){this.parent.removeChild(this);section.afterUpdate();return;}
  1588. var currentNode=this._parentPane._node;if(updateInterface)
  1589. this._parentPane._userOperation=true;function callback(userCallback,originalPropertyText,newStyle)
  1590. {if(!newStyle){if(updateInterface){this._revertStyleUponEditingCanceled(originalPropertyText);}
  1591. userCallback();this.styleTextAppliedForTest();return;}
  1592. this._applyNewStyle(newStyle);if(this._newProperty)
  1593. this._newPropertyInStyle=true;this.property=newStyle.propertyAt(this.property.index);if(updateInterface&¤tNode===this.node())
  1594. this._updatePane();userCallback();this.styleTextAppliedForTest();}
  1595. if(styleText.length&&!/;\s*$/.test(styleText))
  1596. styleText+=";";var overwriteProperty=!!(!this._newProperty||this._newPropertyInStyle);var boundCallback=callback.bind(this,userOperationFinishedCallback.bind(null,this._parentPane,updateInterface),this.originalPropertyText);if(overwriteProperty&&styleText===this.property.propertyText)
  1597. boundCallback.call(null,this.property.ownerStyle)
  1598. else
  1599. this.property.setText(styleText,majorChange,overwriteProperty,boundCallback);},ondblclick:function()
  1600. {return true;},isEventWithinDisclosureTriangle:function(event)
  1601. {return event.target===this._expandElement;},__proto__:WebInspector.StylePropertyTreeElementBase.prototype}
  1602. WebInspector.StylesSidebarPane.CSSPropertyPrompt=function(cssCompletions,sidebarPane,isEditingName)
  1603. {WebInspector.TextPrompt.call(this,this._buildPropertyCompletions.bind(this),WebInspector.StyleValueDelimiters);this.setSuggestBoxEnabled(true);this._cssCompletions=cssCompletions;this._sidebarPane=sidebarPane;this._isEditingName=isEditingName;if(!isEditingName)
  1604. this.disableDefaultSuggestionForEmptyInput();}
  1605. WebInspector.StylesSidebarPane.CSSPropertyPrompt.prototype={onKeyDown:function(event)
  1606. {switch(event.keyIdentifier){case"Up":case"Down":case"PageUp":case"PageDown":if(this._handleNameOrValueUpDown(event)){event.preventDefault();return;}
  1607. break;case"Enter":if(this.autoCompleteElement&&!this.autoCompleteElement.textContent.length){this.tabKeyPressed();return;}
  1608. break;}
  1609. WebInspector.TextPrompt.prototype.onKeyDown.call(this,event);},onMouseWheel:function(event)
  1610. {if(this._handleNameOrValueUpDown(event)){event.consume(true);return;}
  1611. WebInspector.TextPrompt.prototype.onMouseWheel.call(this,event);},tabKeyPressed:function()
  1612. {this.acceptAutoComplete();return false;},_handleNameOrValueUpDown:function(event)
  1613. {function finishHandler(originalValue,replacementString)
  1614. {this._sidebarPane.applyStyleText(this._sidebarPane.nameElement.textContent+": "+this._sidebarPane.valueElement.textContent,false,false,false);}
  1615. function customNumberHandler(prefix,number,suffix)
  1616. {if(number!==0&&!suffix.length&&WebInspector.CSSMetadata.isLengthProperty(this._sidebarPane.property.name))
  1617. suffix="px";return prefix+number+suffix;}
  1618. if(!this._isEditingName&&WebInspector.handleElementValueModifications(event,this._sidebarPane.valueElement,finishHandler.bind(this),this._isValueSuggestion.bind(this),customNumberHandler.bind(this)))
  1619. return true;return false;},_isValueSuggestion:function(word)
  1620. {if(!word)
  1621. return false;word=word.toLowerCase();return this._cssCompletions.keySet().hasOwnProperty(word);},_buildPropertyCompletions:function(proxyElement,wordRange,force,completionsReadyCallback)
  1622. {var prefix=wordRange.toString().toLowerCase();if(!prefix&&!force&&(this._isEditingName||proxyElement.textContent.length)){completionsReadyCallback([]);return;}
  1623. var results=this._cssCompletions.startsWith(prefix);var userEnteredText=wordRange.toString().replace("-","");if(userEnteredText&&(userEnteredText===userEnteredText.toUpperCase())){for(var i=0;i<results.length;++i)
  1624. results[i]=results[i].toUpperCase();}
  1625. var selectedIndex=this._cssCompletions.mostUsedOf(results);completionsReadyCallback(results,selectedIndex);},__proto__:WebInspector.TextPrompt.prototype}
  1626. WebInspector.StylesSidebarPane.MatchedRulesPayload=function()
  1627. {this.inlineStyle=null;this.attributesStyle=null;this.matchedCSSRules=null;this.pseudoElements=null;this.inherited=null;}
  1628. WebInspector.StylesSidebarPane.MatchedRulesPayload.prototype={fulfilled:function()
  1629. {return!!(this.matchedCSSRules&&this.pseudoElements&&this.inherited);}};WebInspector.ElementsPanel=function()
  1630. {WebInspector.Panel.call(this,"elements");this.registerRequiredCSS("elements/elementsPanel.css");this._splitView=new WebInspector.SplitView(true,true,"elementsPanelSplitViewState",325,325);this._splitView.addEventListener(WebInspector.SplitView.Events.SidebarSizeChanged,this._updateTreeOutlineVisibleWidth.bind(this));this._splitView.show(this.element);this._searchableView=new WebInspector.SearchableView(this);this._searchableView.setMinimumSize(25,19);this._splitView.setMainView(this._searchableView);var stackElement=this._searchableView.element;this._contentElement=stackElement.createChild("div");this._contentElement.id="elements-content";if(WebInspector.settings.domWordWrap.get())
  1631. this._contentElement.classList.add("elements-wrap");WebInspector.settings.domWordWrap.addChangeListener(this._domWordWrapSettingChanged.bind(this));var crumbsContainer=stackElement.createChild("div");crumbsContainer.id="elements-crumbs";this._breadcrumbs=new WebInspector.ElementsBreadcrumbs();this._breadcrumbs.show(crumbsContainer);this._breadcrumbs.addEventListener(WebInspector.ElementsBreadcrumbs.Events.NodeSelected,this._crumbNodeSelected,this);this.sidebarPanes={};this.sidebarPanes.platformFonts=new WebInspector.PlatformFontsSidebarPane();this.sidebarPanes.computedStyle=new WebInspector.ComputedStyleSidebarPane();this.sidebarPanes.styles=new WebInspector.StylesSidebarPane(this.sidebarPanes.computedStyle,this._setPseudoClassForNode.bind(this));this.sidebarPanes.styles.addEventListener(WebInspector.StylesSidebarPane.Events.SelectorEditingStarted,this._onEditingSelectorStarted.bind(this));this.sidebarPanes.styles.addEventListener(WebInspector.StylesSidebarPane.Events.SelectorEditingEnded,this._onEditingSelectorEnded.bind(this));this._matchedStylesFilterBoxContainer=createElement("div");this._matchedStylesFilterBoxContainer.className="sidebar-pane-filter-box";this.sidebarPanes.styles.setFilterBoxContainer(this._matchedStylesFilterBoxContainer);this._computedStylesFilterBoxContainer=createElement("div");this._computedStylesFilterBoxContainer.className="sidebar-pane-filter-box";this.sidebarPanes.computedStyle.setFilterBoxContainer(this._computedStylesFilterBoxContainer);this.sidebarPanes.metrics=new WebInspector.MetricsSidebarPane();this.sidebarPanes.properties=new WebInspector.PropertiesSidebarPane();this.sidebarPanes.domBreakpoints=WebInspector.domBreakpointsSidebarPane.createProxy(this);this.sidebarPanes.eventListeners=new WebInspector.EventListenersSidebarPane();this.sidebarPanes.animations=new WebInspector.AnimationsSidebarPane(this.sidebarPanes.styles);WebInspector.dockController.addEventListener(WebInspector.DockController.Events.DockSideChanged,this._dockSideChanged.bind(this));WebInspector.settings.splitVerticallyWhenDockedToRight.addChangeListener(this._dockSideChanged.bind(this));this._dockSideChanged();this._treeOutlines=[];this._targetToTreeOutline=new Map();WebInspector.targetManager.observeTargets(this);WebInspector.settings.showUAShadowDOM.addChangeListener(this._showUAShadowDOMChanged.bind(this));WebInspector.targetManager.addModelListener(WebInspector.DOMModel,WebInspector.DOMModel.Events.DocumentUpdated,this._documentUpdatedEvent,this);WebInspector.targetManager.addModelListener(WebInspector.CSSStyleModel,WebInspector.CSSStyleModel.Events.ModelWasEnabled,this._updateSidebars,this);WebInspector.extensionServer.addEventListener(WebInspector.ExtensionServer.Events.SidebarPaneAdded,this._extensionSidebarPaneAdded,this);}
  1632. WebInspector.ElementsPanel.prototype={_onEditingSelectorStarted:function()
  1633. {for(var i=0;i<this._treeOutlines.length;++i)
  1634. this._treeOutlines[i].setPickNodeMode(true);},_onEditingSelectorEnded:function()
  1635. {for(var i=0;i<this._treeOutlines.length;++i)
  1636. this._treeOutlines[i].setPickNodeMode(false);},targetAdded:function(target)
  1637. {var treeOutline=new WebInspector.ElementsTreeOutline(target,true,true,this._setPseudoClassForNode.bind(this));treeOutline.setWordWrap(WebInspector.settings.domWordWrap.get());treeOutline.wireToDOMModel();treeOutline.addEventListener(WebInspector.ElementsTreeOutline.Events.SelectedNodeChanged,this._selectedNodeChanged,this);treeOutline.addEventListener(WebInspector.ElementsTreeOutline.Events.NodePicked,this._onNodePicked,this);treeOutline.addEventListener(WebInspector.ElementsTreeOutline.Events.ElementsTreeUpdated,this._updateBreadcrumbIfNeeded,this);this._treeOutlines.push(treeOutline);this._targetToTreeOutline.set(target,treeOutline);if(this.isShowing())
  1638. this.wasShown();},targetRemoved:function(target)
  1639. {var treeOutline=this._targetToTreeOutline.remove(target);treeOutline.unwireFromDOMModel();this._treeOutlines.remove(treeOutline);treeOutline.element.remove();},_firstTreeOutlineDeprecated:function()
  1640. {return this._treeOutlines[0]||null;},_updateTreeOutlineVisibleWidth:function()
  1641. {if(!this._treeOutlines.length)
  1642. return;var width=this._splitView.element.offsetWidth;if(this._splitView.isVertical())
  1643. width-=this._splitView.sidebarSize();for(var i=0;i<this._treeOutlines.length;++i){this._treeOutlines[i].setVisibleWidth(width);this._treeOutlines[i].updateSelection();}
  1644. this._breadcrumbs.updateSizes();},defaultFocusedElement:function()
  1645. {return this._treeOutlines.length?this._treeOutlines[0].element:this.element;},searchableView:function()
  1646. {return this._searchableView;},wasShown:function()
  1647. {for(var i=0;i<this._treeOutlines.length;++i){var treeOutline=this._treeOutlines[i];if(treeOutline.element.parentElement!==this._contentElement)
  1648. this._contentElement.appendChild(treeOutline.element);}
  1649. WebInspector.Panel.prototype.wasShown.call(this);this._breadcrumbs.update();for(var i=0;i<this._treeOutlines.length;++i){var treeOutline=this._treeOutlines[i];treeOutline.updateSelection();treeOutline.setVisible(true);if(!treeOutline.rootDOMNode)
  1650. if(treeOutline.domModel().existingDocument())
  1651. this._documentUpdated(treeOutline.domModel(),treeOutline.domModel().existingDocument());else
  1652. treeOutline.domModel().requestDocument();}},willHide:function()
  1653. {for(var i=0;i<this._treeOutlines.length;++i){var treeOutline=this._treeOutlines[i];treeOutline.domModel().hideDOMNodeHighlight();treeOutline.setVisible(false);this._contentElement.removeChild(treeOutline.element);}
  1654. if(this._popoverHelper)
  1655. this._popoverHelper.hidePopover();WebInspector.Panel.prototype.willHide.call(this);},onResize:function()
  1656. {this._updateTreeOutlineVisibleWidth();},_setPseudoClassForNode:function(node,pseudoClass,enable)
  1657. {if(!node||!node.target().cssModel.forcePseudoState(node,pseudoClass,enable))
  1658. return;this._treeOutlineForNode(node).updateOpenCloseTags(node);this._updateCSSSidebars();WebInspector.notifications.dispatchEventToListeners(WebInspector.UserMetrics.UserAction,{action:WebInspector.UserMetrics.UserActionNames.ForcedElementState,selector:WebInspector.DOMPresentationUtils.fullQualifiedSelector(node,false),enabled:enable,state:pseudoClass});},_onNodePicked:function(event)
  1659. {if(!this.sidebarPanes.styles.isEditingSelector())
  1660. return;this.sidebarPanes.styles.updateEditingSelectorForNode((event.data));},_selectedNodeChanged:function(event)
  1661. {var selectedNode=(event.data);for(var i=0;i<this._treeOutlines.length;++i){if(!selectedNode||selectedNode.domModel()!==this._treeOutlines[i].domModel())
  1662. this._treeOutlines[i].selectDOMNode(null);}
  1663. if(!selectedNode&&this._lastValidSelectedNode)
  1664. this._selectedPathOnReset=this._lastValidSelectedNode.path();this._breadcrumbs.setSelectedNode(selectedNode);this._updateSidebars();if(selectedNode){ConsoleAgent.addInspectedNode(selectedNode.id);this._lastValidSelectedNode=selectedNode;}
  1665. WebInspector.notifications.dispatchEventToListeners(WebInspector.NotificationService.Events.SelectedNodeChanged);},_updateSidebars:function()
  1666. {this._updateCSSSidebars();this.sidebarPanes.properties.setNode(this.selectedDOMNode());this.sidebarPanes.eventListeners.setNode(this.selectedDOMNode());this.sidebarPanes.animations.setNode(this.selectedDOMNode());},_reset:function()
  1667. {delete this.currentQuery;},_documentUpdatedEvent:function(event)
  1668. {this._documentUpdated((event.target),(event.data));},_documentUpdated:function(domModel,inspectedRootDocument)
  1669. {this._reset();this.searchCanceled();var treeOutline=this._targetToTreeOutline.get(domModel.target());treeOutline.rootDOMNode=inspectedRootDocument;if(!inspectedRootDocument){if(this.isShowing())
  1670. domModel.requestDocument();return;}
  1671. WebInspector.domBreakpointsSidebarPane.restoreBreakpoints(domModel.target());function selectNode(candidateFocusNode)
  1672. {if(!candidateFocusNode)
  1673. candidateFocusNode=inspectedRootDocument.body||inspectedRootDocument.documentElement;if(!candidateFocusNode)
  1674. return;this.selectDOMNode(candidateFocusNode);if(treeOutline.selectedTreeElement)
  1675. treeOutline.selectedTreeElement.expand();}
  1676. function selectLastSelectedNode(nodeId)
  1677. {if(this.selectedDOMNode()){return;}
  1678. var node=nodeId?domModel.nodeForId(nodeId):null;selectNode.call(this,node);}
  1679. if(this._omitDefaultSelection)
  1680. return;if(this._selectedPathOnReset)
  1681. domModel.pushNodeByPathToFrontend(this._selectedPathOnReset,selectLastSelectedNode.bind(this));else
  1682. selectNode.call(this,null);delete this._selectedPathOnReset;},searchCanceled:function()
  1683. {delete this._searchQuery;this._hideSearchHighlights();this._searchableView.updateSearchMatchesCount(0);delete this._currentSearchResultIndex;delete this._searchResults;var targets=WebInspector.targetManager.targets();for(var i=0;i<targets.length;++i)
  1684. targets[i].domModel.cancelSearch();},performSearch:function(searchConfig,shouldJump,jumpBackwards)
  1685. {var query=searchConfig.query;this.searchCanceled();const whitespaceTrimmedQuery=query.trim();if(!whitespaceTrimmedQuery.length)
  1686. return;this._searchQuery=query;var targets=WebInspector.targetManager.targets();var promises=[];for(var i=0;i<targets.length;++i)
  1687. promises.push(targets[i].domModel.performSearchPromise(whitespaceTrimmedQuery,WebInspector.settings.showUAShadowDOM.get()));Promise.all(promises).then(resultCountCallback.bind(this));function resultCountCallback(resultCounts)
  1688. {this._searchResults=[];for(var i=0;i<resultCounts.length;++i){var resultCount=resultCounts[i];for(var j=0;j<resultCount;++j)
  1689. this._searchResults.push({target:targets[i],index:j,node:undefined});}
  1690. this._searchableView.updateSearchMatchesCount(this._searchResults.length);if(!this._searchResults.length)
  1691. return;this._currentSearchResultIndex=-1;if(shouldJump)
  1692. this._jumpToSearchResult(jumpBackwards?-1:0);}},_domWordWrapSettingChanged:function(event)
  1693. {this._contentElement.classList.toggle("elements-wrap",event.data);for(var i=0;i<this._treeOutlines.length;++i)
  1694. this._treeOutlines[i].setWordWrap((event.data));var selectedNode=this.selectedDOMNode();if(!selectedNode)
  1695. return;var treeElement=this._treeElementForNode(selectedNode);if(treeElement)
  1696. treeElement.updateSelection();},switchToAndFocus:function(node)
  1697. {this._searchableView.cancelSearch();WebInspector.inspectorView.setCurrentPanel(this);this.selectDOMNode(node,true);},_getPopoverAnchor:function(element,event)
  1698. {var anchor=element.enclosingNodeOrSelfWithClass("webkit-html-resource-link");if(!anchor||!anchor.href)
  1699. return;return anchor;},_showPopover:function(anchor,popover)
  1700. {var node=this.selectedDOMNode();if(node)
  1701. WebInspector.DOMPresentationUtils.buildImagePreviewContents(node.target(),anchor.href,true,showPopover);function showPopover(contents)
  1702. {if(!contents)
  1703. return;popover.setCanShrink(false);popover.showForAnchor(contents,anchor);}},_jumpToSearchResult:function(index)
  1704. {this._hideSearchHighlights();this._currentSearchResultIndex=(index+this._searchResults.length)%this._searchResults.length;this._highlightCurrentSearchResult();},jumpToNextSearchResult:function()
  1705. {if(!this._searchResults)
  1706. return;this._jumpToSearchResult(this._currentSearchResultIndex+1);},jumpToPreviousSearchResult:function()
  1707. {if(!this._searchResults)
  1708. return;this._jumpToSearchResult(this._currentSearchResultIndex-1);},supportsCaseSensitiveSearch:function()
  1709. {return false;},supportsRegexSearch:function()
  1710. {return false;},_highlightCurrentSearchResult:function()
  1711. {var index=this._currentSearchResultIndex;var searchResults=this._searchResults;var searchResult=searchResults[index];if(searchResult.node===null){this._searchableView.updateCurrentMatchIndex(index);return;}
  1712. function searchCallback(node)
  1713. {searchResult.node=node;this._highlightCurrentSearchResult();}
  1714. if(typeof searchResult.node==="undefined"){searchResult.target.domModel.searchResult(searchResult.index,searchCallback.bind(this));return;}
  1715. this._searchableView.updateCurrentMatchIndex(index);var treeElement=this._treeElementForNode(searchResult.node);if(treeElement){treeElement.highlightSearchResults(this._searchQuery);treeElement.reveal();var matches=treeElement.listItemElement.getElementsByClassName("highlighted-search-result");if(matches.length)
  1716. matches[0].scrollIntoViewIfNeeded();}},_hideSearchHighlights:function()
  1717. {if(!this._searchResults||!this._searchResults.length||this._currentSearchResultIndex<0)
  1718. return;var searchResult=this._searchResults[this._currentSearchResultIndex];if(!searchResult.node)
  1719. return;var treeOutline=this._targetToTreeOutline.get(searchResult.target);var treeElement=treeOutline.findTreeElement(searchResult.node);if(treeElement)
  1720. treeElement.hideSearchHighlights();},selectedDOMNode:function()
  1721. {for(var i=0;i<this._treeOutlines.length;++i){var treeOutline=this._treeOutlines[i];if(treeOutline.selectedDOMNode())
  1722. return treeOutline.selectedDOMNode();}
  1723. return null;},selectDOMNode:function(node,focus)
  1724. {for(var i=0;i<this._treeOutlines.length;++i){var treeOutline=this._treeOutlines[i];if(treeOutline.target()===node.target())
  1725. treeOutline.selectDOMNode(node,focus);else
  1726. treeOutline.selectDOMNode(null);}},_updateBreadcrumbIfNeeded:function(event)
  1727. {var nodes=(event.data);this._breadcrumbs.updateNodes(nodes);},_crumbNodeSelected:function(event)
  1728. {var node=(event.data);this.selectDOMNode(node,true);},_updateCSSSidebars:function()
  1729. {var selectedDOMNode=this.selectedDOMNode();if(!selectedDOMNode||!selectedDOMNode.target().cssModel.isEnabled())
  1730. return;this.sidebarPanes.styles.setNode(selectedDOMNode);this.sidebarPanes.metrics.setNode(selectedDOMNode);this.sidebarPanes.platformFonts.setNode(selectedDOMNode);},handleShortcut:function(event)
  1731. {function handleUndoRedo(treeOutline)
  1732. {if(WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(event)&&!event.shiftKey&&event.keyIdentifier==="U+005A"){treeOutline.target().domModel.undo(this._updateSidebars.bind(this));event.handled=true;return;}
  1733. var isRedoKey=WebInspector.isMac()?event.metaKey&&event.shiftKey&&event.keyIdentifier==="U+005A":event.ctrlKey&&event.keyIdentifier==="U+0059";if(isRedoKey){treeOutline.target().domModel.redo(this._updateSidebars.bind(this));event.handled=true;}}
  1734. var treeOutline=null;for(var i=0;i<this._treeOutlines.length;++i){if(this._treeOutlines[i].selectedDOMNode()===this._lastValidSelectedNode)
  1735. treeOutline=this._treeOutlines[i];}
  1736. if(!treeOutline)
  1737. return;if(!treeOutline.editing()){handleUndoRedo.call(this,treeOutline);if(event.handled)
  1738. return;}
  1739. treeOutline.handleShortcut(event);if(event.handled)
  1740. return;WebInspector.Panel.prototype.handleShortcut.call(this,event);},_treeOutlineForNode:function(node)
  1741. {if(!node)
  1742. return null;return this._targetToTreeOutline.get(node.target())||null;},_treeElementForNode:function(node)
  1743. {var treeOutline=this._treeOutlineForNode(node);return(treeOutline.findTreeElement(node));},handleCopyEvent:function(event)
  1744. {if(!WebInspector.currentFocusElement()||!WebInspector.currentFocusElement().enclosingNodeOrSelfWithClass("elements-tree-outline"))
  1745. return;var treeOutline=this._treeOutlineForNode(this.selectedDOMNode());if(treeOutline)
  1746. treeOutline.handleCopyOrCutKeyboardEvent(false,event);},handleCutEvent:function(event)
  1747. {var treeOutline=this._treeOutlineForNode(this.selectedDOMNode());if(treeOutline)
  1748. treeOutline.handleCopyOrCutKeyboardEvent(true,event);},handlePasteEvent:function(event)
  1749. {var treeOutline=this._treeOutlineForNode(this.selectedDOMNode());if(treeOutline)
  1750. treeOutline.handlePasteKeyboardEvent(event);},_leaveUserAgentShadowDOM:function(node)
  1751. {var userAgentShadowRoot=node.ancestorUserAgentShadowRoot();return userAgentShadowRoot?(userAgentShadowRoot.parentNode):node;},revealAndSelectNode:function(node)
  1752. {if(WebInspector.inspectElementModeController&&WebInspector.inspectElementModeController.enabled()){InspectorFrontendHost.bringToFront();WebInspector.inspectElementModeController.disable();}
  1753. this._omitDefaultSelection=true;WebInspector.inspectorView.setCurrentPanel(this);node=WebInspector.settings.showUAShadowDOM.get()?node:this._leaveUserAgentShadowDOM(node);node.highlightForTwoSeconds();this.selectDOMNode(node,true);delete this._omitDefaultSelection;if(!this._notFirstInspectElement)
  1754. InspectorFrontendHost.inspectElementCompleted();this._notFirstInspectElement=true;},appendApplicableItems:function(event,contextMenu,object)
  1755. {if(!(object instanceof WebInspector.RemoteObject&&((object)).isNode())&&!(object instanceof WebInspector.DOMNode)&&!(object instanceof WebInspector.DeferredDOMNode)){return;}
  1756. if(object instanceof WebInspector.DOMNode){contextMenu.appendSeparator();WebInspector.domBreakpointsSidebarPane.populateNodeContextMenu(object,contextMenu);}
  1757. if(this.element.isAncestor((event.target)))
  1758. return;var commandCallback=WebInspector.Revealer.reveal.bind(WebInspector.Revealer,object);contextMenu.appendItem(WebInspector.UIString.capitalize("Reveal in Elements ^panel"),commandCallback);},_sidebarContextMenuEventFired:function(event)
  1759. {var contextMenu=new WebInspector.ContextMenu(event);contextMenu.show();},_dockSideChanged:function()
  1760. {var vertically=WebInspector.dockController.isVertical()&&WebInspector.settings.splitVerticallyWhenDockedToRight.get();this._splitVertically(vertically);},_showUAShadowDOMChanged:function()
  1761. {for(var i=0;i<this._treeOutlines.length;++i)
  1762. this._treeOutlines[i].update();},_splitVertically:function(vertically)
  1763. {if(this.sidebarPaneView&&vertically===!this._splitView.isVertical())
  1764. return;if(this.sidebarPaneView){this.sidebarPaneView.detach();this._splitView.uninstallResizer(this.sidebarPaneView.headerElement());}
  1765. this._splitView.setVertical(!vertically);var computedPane=new WebInspector.SidebarPane(WebInspector.UIString("Computed"));computedPane.element.classList.add("composite");computedPane.element.classList.add("fill");var expandComputed=computedPane.expand.bind(computedPane);computedPane.bodyElement.classList.add("metrics-and-computed");this.sidebarPanes.computedStyle.setExpandCallback(expandComputed);var matchedStylePanesWrapper=createElement("div");matchedStylePanesWrapper.className="style-panes-wrapper";var computedStylePanesWrapper=createElement("div");computedStylePanesWrapper.className="style-panes-wrapper";function showMetrics(inComputedStyle)
  1766. {if(inComputedStyle)
  1767. this.sidebarPanes.metrics.show(computedStylePanesWrapper,this.sidebarPanes.computedStyle.element);else
  1768. this.sidebarPanes.metrics.show(matchedStylePanesWrapper);}
  1769. function tabSelected(event)
  1770. {var tabId=(event.data.tabId);if(tabId===computedPane.title())
  1771. showMetrics.call(this,true);else if(tabId===stylesPane.title())
  1772. showMetrics.call(this,false);}
  1773. this.sidebarPaneView=new WebInspector.SidebarTabbedPane();this.sidebarPaneView.element.addEventListener("contextmenu",this._sidebarContextMenuEventFired.bind(this),false);if(this._popoverHelper)
  1774. this._popoverHelper.hidePopover();this._popoverHelper=new WebInspector.PopoverHelper(this.sidebarPaneView.element,this._getPopoverAnchor.bind(this),this._showPopover.bind(this));this._popoverHelper.setTimeout(0);if(vertically){this._splitView.installResizer(this.sidebarPaneView.headerElement());this.sidebarPanes.metrics.setExpandCallback(expandComputed);var compositePane=new WebInspector.SidebarPane(this.sidebarPanes.styles.title());compositePane.element.classList.add("composite");compositePane.element.classList.add("fill");var expandComposite=compositePane.expand.bind(compositePane);var splitView=new WebInspector.SplitView(true,true,"stylesPaneSplitViewState",0.5);splitView.show(compositePane.bodyElement);var vbox1=new WebInspector.VBox();vbox1.element.appendChild(matchedStylePanesWrapper);vbox1.element.appendChild(this._matchedStylesFilterBoxContainer);splitView.setMainView(vbox1);var vbox2=new WebInspector.VBox();vbox2.element.appendChild(computedStylePanesWrapper);vbox2.element.appendChild(this._computedStylesFilterBoxContainer);splitView.setSidebarView(vbox2);this.sidebarPanes.styles.setExpandCallback(expandComposite);computedPane.show(computedStylePanesWrapper);computedPane.setExpandCallback(expandComposite);this.sidebarPaneView.addPane(compositePane);}else{var stylesPane=new WebInspector.SidebarPane(this.sidebarPanes.styles.title());stylesPane.element.classList.add("composite");stylesPane.element.classList.add("fill");var expandStyles=stylesPane.expand.bind(stylesPane);stylesPane.bodyElement.classList.add("metrics-and-styles");stylesPane.bodyElement.appendChild(matchedStylePanesWrapper);computedPane.bodyElement.appendChild(computedStylePanesWrapper);this.sidebarPanes.styles.setExpandCallback(expandStyles);this.sidebarPanes.metrics.setExpandCallback(expandStyles);this.sidebarPaneView.addEventListener(WebInspector.TabbedPane.EventTypes.TabSelected,tabSelected,this);stylesPane.bodyElement.appendChild(this._matchedStylesFilterBoxContainer);computedPane.bodyElement.appendChild(this._computedStylesFilterBoxContainer);this.sidebarPaneView.addPane(stylesPane);this.sidebarPaneView.addPane(computedPane);}
  1775. this.sidebarPanes.styles.show(matchedStylePanesWrapper);this.sidebarPanes.computedStyle.show(computedStylePanesWrapper);matchedStylePanesWrapper.appendChild(this.sidebarPanes.styles.titleElement);showMetrics.call(this,vertically);this.sidebarPanes.platformFonts.show(computedStylePanesWrapper);this.sidebarPaneView.addPane(this.sidebarPanes.eventListeners);this.sidebarPaneView.addPane(this.sidebarPanes.domBreakpoints);this.sidebarPaneView.addPane(this.sidebarPanes.properties);if(Runtime.experiments.isEnabled("animationInspection"))
  1776. this.sidebarPaneView.addPane(this.sidebarPanes.animations);this._extensionSidebarPanesContainer=this.sidebarPaneView;var extensionSidebarPanes=WebInspector.extensionServer.sidebarPanes();for(var i=0;i<extensionSidebarPanes.length;++i)
  1777. this._addExtensionSidebarPane(extensionSidebarPanes[i]);this._splitView.setSidebarView(this.sidebarPaneView);this.sidebarPanes.styles.expand();},_extensionSidebarPaneAdded:function(event)
  1778. {var pane=(event.data);this._addExtensionSidebarPane(pane);},_addExtensionSidebarPane:function(pane)
  1779. {if(pane.panelName()===this.name){this.setHideOnDetach();this._extensionSidebarPanesContainer.addPane(pane);}},__proto__:WebInspector.Panel.prototype}
  1780. WebInspector.ElementsPanel.ContextMenuProvider=function()
  1781. {}
  1782. WebInspector.ElementsPanel.ContextMenuProvider.prototype={appendApplicableItems:function(event,contextMenu,target)
  1783. {WebInspector.ElementsPanel.instance().appendApplicableItems(event,contextMenu,target);}}
  1784. WebInspector.ElementsPanel.DOMNodeRevealer=function()
  1785. {}
  1786. WebInspector.ElementsPanel.DOMNodeRevealer.prototype={reveal:function(node)
  1787. {return new Promise(revealPromise);function revealPromise(resolve,reject)
  1788. {var panel=WebInspector.ElementsPanel.instance();if(node instanceof WebInspector.DOMNode)
  1789. onNodeResolved((node));else if(node instanceof WebInspector.DeferredDOMNode)
  1790. ((node)).resolve(onNodeResolved);else if(node instanceof WebInspector.RemoteObject)
  1791. ((node)).pushNodeToFrontend(onNodeResolved);else
  1792. reject(new Error("Can't reveal a non-node."));function onNodeResolved(resolvedNode)
  1793. {if(resolvedNode){panel.revealAndSelectNode(resolvedNode);resolve(undefined);return;}
  1794. reject(new Error("Could not resolve node to reveal."));}}}}
  1795. WebInspector.ElementsPanel.show=function()
  1796. {WebInspector.inspectorView.setCurrentPanel(WebInspector.ElementsPanel.instance());}
  1797. WebInspector.ElementsPanel.instance=function()
  1798. {if(!WebInspector.ElementsPanel._instanceObject)
  1799. WebInspector.ElementsPanel._instanceObject=new WebInspector.ElementsPanel();return WebInspector.ElementsPanel._instanceObject;}
  1800. WebInspector.ElementsPanelFactory=function()
  1801. {}
  1802. WebInspector.ElementsPanelFactory.prototype={createPanel:function()
  1803. {return WebInspector.ElementsPanel.instance();}};WebInspector.AnimationsSidebarPane=function(stylesPane)
  1804. {WebInspector.ElementsSidebarPane.call(this,WebInspector.UIString("Animations"));this._stylesPane=stylesPane;this.headerElement=createElementWithClass("div","animationsHeader");this._showSubtreeSetting=WebInspector.settings.createSetting("showSubtreeAnimations",true);this._showSubtreeSetting.addChangeListener(this._showSubtreeSettingChanged.bind(this));this._globalControls=new WebInspector.AnimationsSidebarPane.GlobalAnimationControls(this._showSubtreeSetting);this.headerElement.appendChild(this._globalControls.element);this._emptyElement=createElement("div");this._emptyElement.className="info";this._emptyElement.textContent=WebInspector.UIString("No Animations");this.animationsElement=createElement("div");this.animationsElement.appendChild(this._emptyElement);this._animationSections=[];this.bodyElement.appendChild(this.headerElement);this.bodyElement.appendChild(this.animationsElement);}
  1805. WebInspector.AnimationsSidebarPane._showSubtreeAnimationsCheckbox=function(setting)
  1806. {if(!WebInspector.AnimationsSidebarPane._showSubtreeAnimationsCheckboxElement){WebInspector.AnimationsSidebarPane._showSubtreeAnimationsCheckboxElement=WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Show subtree animations"),setting,true);WebInspector.AnimationsSidebarPane._showSubtreeAnimationsCheckboxElement.classList.add("checkbox-with-label");}
  1807. return WebInspector.AnimationsSidebarPane._showSubtreeAnimationsCheckboxElement;}
  1808. WebInspector.AnimationsSidebarPane.prototype={setNode:function(node)
  1809. {WebInspector.ElementsSidebarPane.prototype.setNode.call(this,node);if(!node)
  1810. return;this._updateTarget(node.target());},_updateTarget:function(target)
  1811. {if(this._target===target)
  1812. return;if(this._target)
  1813. this._target.animationModel.removeEventListener(WebInspector.AnimationModel.Events.AnimationPlayerCreated,this._animationPlayerCreated,this);this._target=target;this._target.animationModel.addEventListener(WebInspector.AnimationModel.Events.AnimationPlayerCreated,this._animationPlayerCreated,this);},_showSubtreeSettingChanged:function()
  1814. {this._forceUpdate=true;this.update();},_animationPlayerCreated:function(event)
  1815. {this._addAnimationPlayer((event.data));},_addAnimationPlayer:function(player)
  1816. {if(this.animationsElement.hasChildNodes()&&!this._animationSections.length)
  1817. this.animationsElement.removeChild(this._emptyElement);var section=new WebInspector.AnimationSection(this,this._stylesPane,player);if(this._animationSections.length<10)
  1818. section.expand(true);this._animationSections.push(section);this.animationsElement.appendChild(section.element);if(this._animationSections.length>100)
  1819. this._target.animationModel.stopListening();},doUpdate:function(finishCallback)
  1820. {function animationPlayersCallback(animationPlayers)
  1821. {this.animationsElement.removeChildren();this._animationSections=[];if(!animationPlayers||!animationPlayers.length){this.animationsElement.appendChild(this._emptyElement);finishCallback();return;}
  1822. for(var i=0;i<animationPlayers.length;++i)
  1823. this._addAnimationPlayer(animationPlayers[i]);finishCallback();}
  1824. if(!this.node()){this._globalControls.reset();finishCallback();return;}
  1825. if(!this._forceUpdate&&this._selectedNode===this.node()){for(var i=0;i<this._animationSections.length;++i)
  1826. this._animationSections[i].updateCurrentTime();finishCallback();return;}
  1827. this._forceUpdate=false;this._selectedNode=this.node();this.node().target().animationModel.getAnimationPlayers(this.node().id,this._showSubtreeSetting.get(),animationPlayersCallback.bind(this));this.node().target().animationModel.startListening(this.node().id,this._showSubtreeSetting.get());},__proto__:WebInspector.ElementsSidebarPane.prototype}
  1828. WebInspector.AnimationSection=function(parentPane,stylesPane,animationPlayer)
  1829. {this._parentPane=parentPane;this._stylesPane=stylesPane;this._propertiesElement=createElement("div");this._keyframesElement=createElement("div");this._setAnimationPlayer(animationPlayer);this._updateThrottler=new WebInspector.Throttler(WebInspector.AnimationSection.updateTimeout);this.element=createElement("div");this.element.appendChild(this._createHeader());this.bodyElement=this.element.createChild("div","animation-section-body");this.bodyElement.appendChild(this._createAnimationControls());this.bodyElement.appendChild(this._propertiesElement);this.bodyElement.appendChild(this._keyframesElement);}
  1830. WebInspector.AnimationSection.updateTimeout=100;WebInspector.AnimationSection.prototype={_expanded:function()
  1831. {return this.bodyElement.classList.contains("expanded");},_toggle:function()
  1832. {this.bodyElement.classList.toggle("expanded");this.updateCurrentTime();},expand:function(expanded)
  1833. {this.bodyElement.classList.toggle("expanded",expanded);this.updateCurrentTime();},updateCurrentTime:function()
  1834. {if(this._expanded())
  1835. this._updateThrottler.schedule(this._updateCurrentTime.bind(this),false);},_updateCurrentTime:function(finishCallback)
  1836. {function updateSliderCallback(currentTime,isRunning)
  1837. {if(isRunning&&this._parentPane.isShowing()){this.currentTimeSlider.value=this.player.source().iterationCount()==null?currentTime%this.player.source().duration():currentTime;finishCallback();this.updateCurrentTime();}else{this.player.payload().pausedState=true;this._updatePauseButton(true);finishCallback();}}
  1838. this.player.getCurrentState(updateSliderCallback.bind(this));},_createCurrentTimeSlider:function()
  1839. {function sliderMouseDown()
  1840. {this.player.pause(this._setAnimationPlayer.bind(this));this._isPaused=this.player.paused();}
  1841. function sliderMouseUp()
  1842. {if(this._isPaused)
  1843. return;this.player.play(this._setAnimationPlayer.bind(this));this._updatePauseButton(false);this.updateCurrentTime();}
  1844. function sliderInputHandler(e)
  1845. {this.player.setCurrentTime(parseFloat(e.target.value),this._setAnimationPlayer.bind(this));}
  1846. var iterationDuration=this.player.source().duration();var iterationCount=this.player.source().iterationCount();var slider=createElement("input");slider.type="range";slider.min=0;slider.step=0.01;if(!iterationCount){slider.max=iterationDuration;slider.value=this.player.currentTime()%iterationDuration;}else{slider.max=iterationCount*iterationDuration;slider.value=this.player.currentTime();}
  1847. slider.addEventListener("input",sliderInputHandler.bind(this));slider.addEventListener("mousedown",sliderMouseDown.bind(this));slider.addEventListener("mouseup",sliderMouseUp.bind(this));this.updateCurrentTime();return slider;},_createHeader:function()
  1848. {function nodeResolved(node)
  1849. {headerElement.createTextChild(" - ");headerElement.appendChild(WebInspector.DOMPresentationUtils.linkifyNodeReference(node));}
  1850. var headerElement=createElementWithClass("div","sidebar-separator");var id=this.player.source().name()?this.player.source().name():this.player.id();headerElement.createTextChild(WebInspector.UIString("Animation")+" "+id);headerElement.addEventListener("click",this._toggle.bind(this),false);this.player.source().getNode(nodeResolved);return headerElement;},_updatePauseButton:function(paused)
  1851. {this._pauseButton.setToggled(paused);this._pauseButton.setTitle(paused?WebInspector.UIString("Play animation"):WebInspector.UIString("Pause animation"));},_createAnimationControls:function()
  1852. {function pauseButtonHandler()
  1853. {if(this.player.paused()){this.player.play(this._setAnimationPlayer.bind(this));this._updatePauseButton(false);this.updateCurrentTime();}else{this.player.pause(this._setAnimationPlayer.bind(this));this._updatePauseButton(true);}}
  1854. this._pauseButton=new WebInspector.StatusBarButton("","pause-status-bar-item");this._pauseButton.element.style.display="inline-block";this._updatePauseButton(this.player.paused());this._pauseButton.addEventListener("click",pauseButtonHandler,this);this.currentTimeSlider=this._createCurrentTimeSlider();var controls=createElement("div");var shadowRoot=controls.createShadowRoot();shadowRoot.appendChild(WebInspector.View.createStyleElement("ui/statusBar.css"));shadowRoot.appendChild(this._pauseButton.element);shadowRoot.appendChild(this.currentTimeSlider);return controls;},_setAnimationPlayer:function(p)
  1855. {if(!p||p===this.player)
  1856. return;this.player=p;this._propertiesElement.removeChildren();var animationObject={"playState":p.playState(),"start-time":p.startTime(),"player-playback-rate":p.playbackRate(),"id":p.id(),"start-delay":p.source().startDelay(),"playback-rate":p.source().playbackRate(),"iteration-start":p.source().iterationStart(),"iteration-count":p.source().iterationCount(),"duration":p.source().duration(),"direction":p.source().direction(),"fill-mode":p.source().fillMode(),"time-fraction":p.source().timeFraction()};var obj=WebInspector.RemoteObject.fromLocalObject(animationObject);var objSection=new WebInspector.ObjectPropertiesSection(obj,WebInspector.UIString("Animation Properties"));this._propertiesElement.appendChild(objSection.element);if(this.player.source().keyframesRule()){var keyframes=this.player.source().keyframesRule().keyframes();for(var j=0;j<keyframes.length;j++){var animationCascade=new WebInspector.SectionCascade();var model=animationCascade.appendModelFromStyle(keyframes[j].style(),keyframes[j].offset());model.setIsAttribute(true);model.setEditable(true);var styleSection=new WebInspector.StylePropertiesSection(this._stylesPane,model);styleSection.expand();this._keyframesElement.appendChild(styleSection.element);}}}}
  1857. WebInspector.AnimationsSidebarPane.GlobalPlaybackRates=[0.1,0.25,0.5,1.0];WebInspector.AnimationsSidebarPane.GlobalAnimationControls=function(showSubtreeAnimationsSetting)
  1858. {WebInspector.StatusBar.call(this);this.element.classList.add("global-animations-toolbar");var labelElement=createElement("div");labelElement.createTextChild("Global playback:");this.appendStatusBarItem(new WebInspector.StatusBarItemWrapper(labelElement));this._pauseButton=new WebInspector.StatusBarButton("","pause-status-bar-item");this._pauseButton.addEventListener("click",this._pauseHandler.bind(this),this);this.appendStatusBarItem(this._pauseButton);this._playbackRateButtons=[];WebInspector.AnimationsSidebarPane.GlobalPlaybackRates.forEach(this._createPlaybackRateButton.bind(this));var subtreeCheckboxLabel=WebInspector.UIString("Show subtree animations");this._showSubtreeAnimationsCheckbox=new WebInspector.StatusBarCheckbox(subtreeCheckboxLabel,subtreeCheckboxLabel,showSubtreeAnimationsSetting);this.appendStatusBarItem(this._showSubtreeAnimationsCheckbox);this.reset();}
  1859. WebInspector.AnimationsSidebarPane.GlobalAnimationControls.prototype={_createPlaybackRateButton:function(playbackRate)
  1860. {var button=new WebInspector.StatusBarTextButton(WebInspector.UIString("Set all animations playback rate to "+playbackRate+"x"),"playback-rate-button",playbackRate+"x");button.playbackRate=playbackRate;button.addEventListener("click",this._playbackRateHandler.bind(this,playbackRate),this);this._playbackRateButtons.push(button);this.appendStatusBarItem(button);},reset:function()
  1861. {this._paused=false;this._playbackRate=1.0;this._updateControls();},_updateControls:function()
  1862. {this._updatePauseButton();for(var i=0;i<this._playbackRateButtons.length;i++)
  1863. this._playbackRateButtons[i].setToggled(this._playbackRateButtons[i].playbackRate===this._playbackRate);},_updatePauseButton:function()
  1864. {this._pauseButton.setToggled(this._paused);this._pauseButton.setTitle(this._paused?WebInspector.UIString("Resume all animations"):WebInspector.UIString("Pause all animations"));},_pauseHandler:function()
  1865. {this._paused=!this._paused;PageAgent.setAnimationsPlaybackRate(this._paused?0:this._playbackRate);this._updatePauseButton();},_playbackRateHandler:function(playbackRate)
  1866. {this._playbackRate=playbackRate;this._updateControls();PageAgent.setAnimationsPlaybackRate(this._paused?0:this._playbackRate);},__proto__:WebInspector.StatusBar.prototype};Runtime.cachedResources["elements/breadcrumbs.css"]="/*\n * Copyright 2014 The Chromium Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n.crumbs {\n    display: inline-block;\n    pointer-events: auto;\n    cursor: default;\n    font-size: 11px;\n    line-height: 17px;\n}\n\n.crumbs .crumb {\n    display: inline-block;\n    padding: 0 7px;\n    height: 18px;\n    white-space: nowrap;\n}\n\n.crumbs .crumb.collapsed > * {\n    display: none;\n}\n\n.crumbs .crumb.collapsed::before {\n    content: \"\\2026\";\n    font-weight: bold;\n}\n\n.crumbs .crumb.compact .extra {\n    display: none;\n}\n\n.crumbs .crumb.selected, .crumbs .crumb.selected:hover {\n    background-color: rgb(56, 121, 217);\n    color: white;\n    text-shadow: rgba(255, 255, 255, 0.5) 0 0 0;\n}\n\n.crumbs .crumb:hover {\n    background-color: rgb(216, 216, 216);\n}\n\n/*# sourceURL=elements/breadcrumbs.css */";Runtime.cachedResources["elements/elementsPanel.css"]="/*\n * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.\n * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>\n *\n * Redistribution and use in source and binary forms, with or without\n * modification, are permitted provided that the following conditions\n * are met:\n *\n * 1.  Redistributions of source code must retain the above copyright\n *     notice, this list of conditions and the following disclaimer.\n * 2.  Redistributions in binary form must reproduce the above copyright\n *     notice, this list of conditions and the following disclaimer in the\n *     documentation and/or other materials provided with the distribution.\n * 3.  Neither the name of Apple Computer, Inc. (\"Apple\") nor the names of\n *     its contributors may be used to endorse or promote products derived\n *     from this software without specific prior written permission.\n *\n * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS \"AS IS\" AND ANY\n * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED\n * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE\n * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY\n * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES\n * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;\n * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND\n * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT\n * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF\n * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.\n */\n\n#elements-content {\n    flex: 1 1;\n    overflow: auto;\n    padding: 2px 0 0 0;\n    transform: translateZ(0);\n}\n\n#elements-content:not(.elements-wrap) > div {\n    display: inline-block;\n    min-width: 100%;\n}\n\n#elements-content.elements-wrap {\n    overflow-x: hidden;\n}\n\n#elements-crumbs {\n    flex: 0 0 19px;\n    background-color: white;\n    border-top: 1px solid #ccc;\n    overflow: hidden;\n    height: 19px;\n    width: 100%;\n}\n\n.metrics {\n    padding: 8px;\n    font-size: 10px;\n    text-align: center;\n    white-space: nowrap;\n}\n\n.metrics .label {\n    position: absolute;\n    font-size: 10px;\n    margin-left: 3px;\n    padding-left: 2px;\n    padding-right: 2px;\n}\n\n.metrics .position {\n    border: 1px rgb(66%, 66%, 66%) dotted;\n    background-color: white;\n    display: inline-block;\n    text-align: center;\n    padding: 3px;\n    margin: 3px;\n}\n\n.metrics .margin {\n    border: 1px dashed;\n    background-color: white;\n    display: inline-block;\n    text-align: center;\n    vertical-align: middle;\n    padding: 3px;\n    margin: 3px;\n}\n\n.metrics .border {\n    border: 1px black solid;\n    background-color: white;\n    display: inline-block;\n    text-align: center;\n    vertical-align: middle;\n    padding: 3px;\n    margin: 3px;\n}\n\n.metrics .padding {\n    border: 1px grey dashed;\n    background-color: white;\n    display: inline-block;\n    text-align: center;\n    vertical-align: middle;\n    padding: 3px;\n    margin: 3px;\n}\n\n.metrics .content {\n    position: static;\n    border: 1px gray solid;\n    background-color: white;\n    display: inline-block;\n    text-align: center;\n    vertical-align: middle;\n    padding: 3px;\n    margin: 3px;\n    min-width: 80px;\n    overflow: visible;\n}\n\n.metrics .content span {\n    display: inline-block;\n}\n\n.metrics .editing {\n    position: relative;\n    z-index: 100;\n    cursor: text;\n}\n\n.metrics .left {\n    display: inline-block;\n    vertical-align: middle;\n}\n\n.metrics .right {\n    display: inline-block;\n    vertical-align: middle;\n}\n\n.metrics .top {\n    display: inline-block;\n}\n\n.metrics .bottom {\n    display: inline-block;\n}\n\n.styles-section {\n    padding: 2px 2px 4px 4px;\n    min-height: 18px;\n    white-space: nowrap;\n    background-origin: padding;\n    background-clip: padding;\n    -webkit-user-select: text;\n    border-bottom: 1px solid rgb(191, 191, 191);\n    position: relative;\n}\n\n.styles-pane .sidebar-separator {\n    border-top: 0 none;\n}\n\n.styles-section.user-rule {\n    display: none;\n}\n\n.show-user-styles .styles-section.user-rule {\n    display: block;\n}\n\n.styles-sidebar-placeholder {\n    height: 16px;\n}\n\n.styles-section.read-only:not(.computed-style) {\n    background-color: #eee;\n}\n\n.styles-section .properties li.not-parsed-ok {\n    margin-left: 0;\n}\n\n.styles-section.computed-style .properties li.not-parsed-ok {\n    margin-left: -6px;\n}\n\n.styles-section .properties li.filter-match,\n.styles-section .simple-selector.filter-match {\n    background-color: rgba(255, 255, 0, 0.5);\n}\n\n.styles-section .properties li.overloaded.filter-match {\n    background-color: rgba(255, 255, 0, 0.25);\n}\n\n.styles-section .properties li.not-parsed-ok .exclamation-mark {\n    display: inline-block;\n    position: relative;\n    width: 11px;\n    height: 10px;\n    margin: 0 7px 0 0;\n    top: 1px;\n    left: -36px; /* outdent to compensate for the top-level property indent */\n    -webkit-user-select: none;\n    cursor: default;\n    z-index: 1;\n}\n\n.styles-section .header {\n    white-space: nowrap;\n    background-origin: padding;\n    background-clip: padding;\n}\n\n.styles-section .header .title {\n    word-wrap: break-word;\n    white-space: normal;\n}\n\n.styles-section .header .title .media-list {\n    color: #888;\n}\n\n.styles-section .header .title .media-list.media-matches .media.editable-media {\n    color: #222;\n}\n\n.styles-section .header .title .media:not(.editing-media),\n.styles-section .header .title .media:not(.editing-media) .subtitle {\n    overflow: hidden;\n}\n\n.styles-section .header .subtitle {\n    color: rgb(85, 85, 85);\n    float: right;\n    margin-left: 5px;\n    max-width: 100%;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n}\n\n.styles-section .header .subtitle a {\n    color: inherit;\n}\n\n.styles-section .selector {\n    color: #888;\n}\n\n.styles-section .simple-selector.selector-matches {\n    color: #222;\n}\n\n.styles-section a[data-uncopyable] {\n    display: inline-block;\n}\n\n.styles-section a[data-uncopyable]::before {\n    content: attr(data-uncopyable);\n    text-decoration: underline;\n}\n\n.styles-section .properties {\n    display: none;\n    margin: 0;\n    padding: 2px 4px 0 0;\n    list-style: none;\n    clear: both;\n}\n\n.styles-section.matched-styles .properties {\n    padding-left: 0;\n}\n\n.styles-section.no-affect .properties li {\n    opacity: 0.5;\n}\n\n.styles-section.no-affect .properties li.editing {\n    opacity: 1.0;\n}\n\n.styles-section.expanded .properties {\n    display: block;\n}\n\n.styles-section .properties li {\n    margin-left: 12px;\n    padding-left: 22px;\n    white-space: normal;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    cursor: auto;\n}\n\n.styles-section.computed-style.expanded .properties > li {\n    padding-left: 0;\n}\n\n.styles-section.computed-style.expanded .properties > li .webkit-css-property {\n    margin-left: 0;\n}\n\n.styles-section .properties li .webkit-css-property {\n    margin-left: -22px; /* outdent the first line of longhand properties (in an expanded shorthand) to compensate for the \"padding-left\" shift in .styles-section .properties li */\n}\n\n.styles-section.expanded .properties > li {\n    padding-left: 38px;\n}\n\n.styles-section .properties > li .webkit-css-property {\n    margin-left: -38px; /* outdent the first line of the top-level properties to compensate for the \"padding-left\" shift in .styles-section .properties > li */\n}\n\n.styles-section .properties > li.child-editing {\n    padding-left: 8px;\n}\n\n.styles-section .properties > li.child-editing .webkit-css-property {\n    margin-left: 0;\n}\n\n.styles-section.matched-styles .properties li {\n    margin-left: 0 !important;\n}\n\n.styles-section .properties li.child-editing {\n    word-wrap: break-word !important;\n    white-space: normal !important;\n    padding-left: 0;\n}\n\n.styles-section .properties ol {\n    display: none;\n    margin: 0;\n    -webkit-padding-start: 12px;\n    list-style: none;\n}\n\n.styles-section .properties ol.expanded {\n    display: block;\n}\n\n.styles-section.matched-styles .properties li.parent .expand-element {\n    -webkit-user-select: none;\n    background-image: url(Images/statusbarButtonGlyphs.png);\n    background-size: 320px 144px;\n    margin-right: 2px;\n    margin-left: -6px;\n    opacity: 0.55;\n    width: 8px;\n    height: 10px;\n    display: inline-block;\n}\n\n@media (-webkit-min-device-pixel-ratio: 1.5) {\n.styles-section.matched-styles .properties li.parent .expand-element {\n    background-image: url(Images/statusbarButtonGlyphs_2x.png);\n}\n} /* media */\n\n.styles-section.matched-styles .properties li.parent .expand-element {\n    background-position: -4px -96px;\n}\n\n.styles-section.matched-styles .properties li.parent.expanded .expand-element {\n    background-position: -20px -96px;\n}\n\n.styles-section .properties li .info {\n    padding-top: 4px;\n    padding-bottom: 3px;\n}\n\n.styles-section.matched-styles:not(.read-only):hover .properties .enabled-button {\n    visibility: visible;\n}\n\n.styles-section.matched-styles:not(.read-only) .properties li.disabled .enabled-button {\n    visibility: visible;\n}\n\n.styles-section .properties .enabled-button {\n    visibility: hidden;\n    float: left;\n    font-size: 10px;\n    margin: 0;\n    vertical-align: top;\n    position: relative;\n    z-index: 1;\n    width: 18px;\n    left: -40px; /* original -2px + (-38px) to compensate for the first line outdent */\n    top: 1px;\n}\n\n.styles-section.matched-styles .properties ol.expanded {\n    margin-left: 16px;\n}\n\n.styles-section .properties .overloaded:not(.has-ignorable-error),\n.styles-section .properties .inactive,\n.styles-section .properties .disabled,\n.styles-section .properties .not-parsed-ok:not(.has-ignorable-error) {\n    text-decoration: line-through;\n}\n\n.styles-section .properties .has-ignorable-error .webkit-css-property {\n    color: inherit;\n}\n\n.styles-section.computed-style .properties .disabled {\n    text-decoration: none;\n    opacity: 0.5;\n}\n\n.styles-section .properties .implicit,\n.styles-section .properties .inherited {\n    opacity: 0.5;\n}\n\n.styles-section .properties .has-ignorable-error {\n    color: gray;\n}\n\n.styles-element-state-pane {\n    overflow: hidden;\n    margin-top: -56px;\n    padding-top: 18px;\n    height: 56px;\n    -webkit-transition: margin-top 0.1s ease-in-out;\n    padding-left: 2px;\n}\n\n.styles-element-state-pane.expanded {\n    border-bottom: 1px solid rgb(189, 189, 189);\n    margin-top: 0;\n}\n\n.styles-element-state-pane > table {\n    width: 100%;\n    border-spacing: 0;\n}\n\n.styles-element-state-pane label {\n    display: flex;\n    margin: 1px;\n}\n\n.styles-animations-controls-pane {\n    overflow: hidden;\n    -webkit-transition: height 0.1s ease-out;\n    height: 0;\n}\n\n.styles-animations-controls-pane > * {\n    margin: 6px 4px;\n}\n\n.styles-animations-controls-pane.expanded {\n    border-bottom: 1px solid rgb(189, 189, 189);\n    height: 56px;\n}\n\n.animations-controls {\n    width: 100%;\n    max-width: 200px;\n    display: flex;\n    align-items: center;\n}\n\n.animations-controls > .status-bar {\n    display: inline-block;\n}\n\n.animations-controls > input {\n    flex-grow: 1;\n    margin-right: 10px;\n}\n\n.animations-controls > .playback-label {\n    width: 35px;\n}\n\n.styles-selector {\n    cursor: text;\n}\n\n.section .event-bars {\n    display: none;\n}\n\n.section.expanded .event-bars {\n    display: block;\n}\n\n.events-pane .section.event-bar {\n    position: relative;\n    margin-left: 10px;\n}\n\n.events-pane .section.event-bar:first-child {\n    margin-top: 1px;\n}\n\n.event-bars .event-bar .header {\n    padding: 0 8px 0 6px;\n    min-height: 16px;\n    opacity: 1.0;\n    white-space: nowrap;\n    background-origin: padding;\n    background-clip: padding;\n}\n\n.event-bars .event-bar .header .title {\n    font-weight: normal;\n    text-shadow: white 0 1px 0;\n}\n\n.event-bars .event-bar .header .subtitle {\n    color: rgba(90, 90, 90, 0.75);\n}\n\n.event-bars .event-bar .header::before {\n    -webkit-user-select: none;\n    background-image: url(Images/statusbarButtonGlyphs.png);\n    background-size: 320px 144px;\n    opacity: 0.5;\n    content: \"a\";\n    color: transparent;\n    text-shadow: none;\n    float: left;\n    width: 8px;\n    margin-right: 4px;\n    margin-top: 2px;\n}\n\n@media (-webkit-min-device-pixel-ratio: 1.5) {\n.event-bars .event-bar .header::before {\n    background-image: url(Images/statusbarButtonGlyphs_2x.png);\n}\n} /* media */\n\n.event-bars .event-bar .header::before {\n    background-position: -4px -96px;\n}\n\n.event-bars .event-bar.expanded .header::before {\n    background-position: -20px -96px;\n}\n\n.image-preview-container {\n    background: transparent;\n    text-align: center;\n}\n\n.image-preview-container img {\n    margin: 2px auto;\n    max-width: 100px;\n    max-height: 100px;\n    background-image: url(Images/checker.png);\n    -webkit-user-select: text;\n    -webkit-user-drag: auto;\n}\n\n.sidebar-pane.composite {\n    position: absolute;\n}\n\n.sidebar-pane.composite > .body {\n    height: 100%;\n}\n\n.sidebar-pane.composite .metrics {\n    border-bottom: 1px solid rgb(64%, 64%, 64%);\n    height: 206px;\n    display: flex;\n    flex-direction: column;\n    -webkit-align-items: center;\n    -webkit-justify-content: center;\n}\n\n.sidebar-pane .metrics-and-styles,\n.sidebar-pane .metrics-and-computed {\n    display: flex !important;\n    flex-direction: column !important;\n    position: relative;\n}\n\n.sidebar-pane .style-panes-wrapper {\n    transform: translateZ(0);\n    flex: 1;\n    overflow-y: auto;\n    position: relative;\n}\n\n.sidebar-pane.composite .metrics-and-computed .sidebar-pane-toolbar,\n.sidebar-pane.composite .metrics-and-styles .sidebar-pane-toolbar {\n    position: absolute;\n}\n\n.sidebar-pane-filter-box {\n    display: flex;\n    border-top: 1px solid rgb(191, 191, 191);\n    flex-basis: 19px;\n}\n\n.sidebar-pane-filter-box > input {\n    outline: none !important;\n    border: none;\n    width: 100%;\n    margin: 0 4px;\n    background: transparent;\n}\n\n.styles-filter-engaged {\n    background-color: rgba(255, 255, 0, 0.5);\n}\n\n.sidebar-pane.composite .metrics-and-computed .sidebar-pane-toolbar {\n    margin-top: 4px;\n    margin-bottom: -4px;\n    position: relative;\n}\n\n.sidebar-pane.composite .platform-fonts .body {\n    padding: 1ex;\n    -webkit-user-select: text;\n}\n\n.sidebar-pane.composite .platform-fonts .sidebar-separator {\n    border-top: none;\n}\n\n.sidebar-pane.composite .platform-fonts .stats-section {\n    margin-bottom: 5px;\n}\n\n.sidebar-pane.composite .platform-fonts .font-stats-item {\n    padding-left: 1em;\n}\n\n.sidebar-pane.composite .platform-fonts .font-stats-item .delimeter {\n    margin: 0 1ex 0 1ex;\n}\n\n.sidebar-pane.composite .metrics-and-styles .metrics {\n    border-bottom: none;\n}\n\n.sidebar-pane > .body > .split-view {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n}\n\n.panel.elements .sidebar-pane-toolbar > select {\n    float: right;\n    width: 23px;\n    height: 17px;\n    color: transparent;\n    background-color: transparent;\n    border: none;\n    background-repeat: no-repeat;\n    margin: 1px 0 0 0;\n    padding: 0;\n    border-radius: 0;\n    -webkit-appearance: none;\n}\n\n.panel.elements .sidebar-pane-toolbar > select:hover {\n    background-position: -23px 0;\n}\n\n.panel.elements .sidebar-pane-toolbar > select:active {\n    background-position: -46px 0;\n}\n\n.panel.elements .sidebar-pane-toolbar > select.select-filter {\n    background-image: url(Images/paneFilterButtons.png);\n}\n.panel.elements .sidebar-pane-toolbar > select > option,\n.panel.elements .sidebar-pane-toolbar > select > hr {\n    color: black;\n}\n\n.styles-section:not(.read-only) .properties .webkit-css-property.styles-panel-hovered,\n.styles-section:not(.read-only) .properties .value .styles-panel-hovered,\n.styles-section:not(.read-only) .properties .value.styles-panel-hovered,\n.styles-section:not(.read-only) span.simple-selector.styles-panel-hovered {\n    text-decoration: underline;\n    cursor: default;\n}\n\n.styles-clipboard-only {\n    display: inline-block;\n    width: 0;\n    opacity: 0;\n    pointer-events: none;\n    white-space: pre;\n}\n\nli.child-editing .styles-clipboard-only {\n    display: none;\n}\n\nli.editing .swatch,\nli.editing .enabled-button {\n    display: none !important;\n}\n\n.sidebar-separator {\n    background-color: #ddd;\n    padding: 0 5px;\n    border-top: 1px solid #ccc;\n    border-bottom: 1px solid #ccc;\n    color: rgb(50, 50, 50);\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    line-height: 16px;\n}\n\n.swatch-inner {\n    width: 100%;\n    height: 100%;\n    display: inline-block;\n    border: 1px solid rgba(128, 128, 128, 0.6);\n}\n\n.swatch-inner:hover {\n    border: 1px solid rgba(64, 64, 64, 0.8);\n}\n\n.animation-section-body {\n    display: none;\n}\n\n.animation-section-body.expanded {\n    display: block;\n}\n\n.animation-section-body .section {\n    border-bottom: 1px solid rgb(191, 191, 191);\n}\n\n.animationsHeader {\n    padding-top: 23px;\n}\n\n.global-animations-toolbar {\n    position: absolute;\n    top: 0;\n    width: 100%;\n    background-color: #eee;\n    border-bottom: 1px solid rgb(163, 163, 163);\n    padding-left: 10px;\n}\n\nlabel.checkbox-with-label {\n    -webkit-user-select: none;\n}\n\n.events-pane .section:not(:first-of-type) {\n    border-top: 1px solid rgb(231, 231, 231);\n}\n\n.event-bar .header .title {\n    font-weight: normal;\n    word-wrap: break-word;\n    white-space: normal;\n    line-height: 18px;\n}\n\n.events-pane .section {\n    margin: 0;\n}\n\n.event-bar .event-properties {\n    padding-left: 16px;\n}\n\n/*# sourceURL=elements/elementsPanel.css */";Runtime.cachedResources["elements/elementsTreeOutline.css"]="/*\n * Copyright (c) 2014 The Chromium Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n.outline-disclosure {\n    width: 100%;\n    display: inline-block;\n    line-height: normal;\n}\n\n.outline-disclosure li {\n    padding: 0 0 0 14px;\n    margin-top: 1px;\n    margin-left: -2px;\n    word-wrap: break-word;\n}\n\n.outline-disclosure li.parent {\n    margin-left: -13px;\n}\n\n.outline-disclosure li.parent::before {\n    float: left;\n    width: 10px;\n    box-sizing: border-box;\n}\n\n.outline-disclosure li.parent::before {\n    -webkit-user-select: none;\n    -webkit-mask-image: url(Images/statusbarButtonGlyphs.png);\n    -webkit-mask-size: 320px 144px;\n    content: \"a\";\n    color: transparent;\n    text-shadow: none;\n    margin-right: 1px;\n}\n\n@media (-webkit-min-device-pixel-ratio: 1.5) {\n.outline-disclosure li.parent::before {\n    -webkit-mask-image: url(Images/statusbarButtonGlyphs_2x.png);\n}\n} /* media */\n\n.outline-disclosure li.parent::before {\n    -webkit-mask-position: -4px -96px;\n    background-color: rgb(110, 110, 110);\n}\n\n.outline-disclosure li .selection {\n    display: none;\n    position: absolute;\n    left: 0;\n    right: 0;\n    height: 15px;\n    z-index: -1;\n}\n\n.outline-disclosure li.hovered:not(.selected) .selection {\n    display: block;\n    left: 3px;\n    right: 3px;\n    background-color: rgba(56, 121, 217, 0.1);\n    border-radius: 5px;\n}\n\n.outline-disclosure li.parent.expanded::before {\n    -webkit-mask-position: -20px -96px;\n}\n\n.outline-disclosure li.selected .selection {\n    display: block;\n    background-color: rgb(212, 212, 212);\n}\n\n.outline-disclosure ol {\n    list-style-type: none;\n    -webkit-padding-start: 12px;\n    margin: 0;\n}\n\n.outline-disclosure ol.children {\n    display: none;\n}\n\n.outline-disclosure ol.children.expanded {\n    display: block;\n}\n\n.outline-disclosure li .webkit-html-tag.close {\n    margin-left: -12px;\n}\n\n.outline-disclosure > ol {\n    position: relative;\n    margin: 0;\n    cursor: default;\n    min-width: 100%;\n    min-height: 100%;\n    -webkit-transform: translateZ(0);\n    padding-left: 2px;\n}\n\n.outline-disclosure ol:focus li.selected {\n    color: white;\n}\n\n.outline-disclosure ol:focus li.parent.selected::before {\n    background-color: white;\n}\n\n.outline-disclosure ol:focus li.selected * {\n    color: inherit;\n}\n\n.outline-disclosure ol:focus li.selected .selection {\n    background-color: rgb(56, 121, 217);\n}\n\n.elements-tree-outline li.shadow-root + ol {\n    margin-left: 5px;\n    padding-left: 5px;\n    border-left: 1px solid gray;\n}\n\n.elements-tree-editor {\n    -webkit-user-select: text;\n    -webkit-user-modify: read-write-plaintext-only;\n}\n\n.outline-disclosure li.elements-drag-over .selection {\n    display: block;\n    margin-top: -2px;\n    border-top: 2px solid rgb(56, 121, 217);\n}\n\n.outline-disclosure li.in-clipboard .highlight {\n    outline: 1px dotted darkgrey;\n}\n\n.CodeMirror {\n    /* Consistent with the .editing class in inspector.css */\n    box-shadow: rgba(0, 0, 0, .5) 3px 3px 4px;\n    outline: 1px solid rgb(66%, 66%, 66%) !important;\n    background-color: white;\n}\n\n.CodeMirror-lines {\n    padding: 0;\n}\n\n.CodeMirror pre {\n    padding: 0;\n}\n\nbutton, input, select {\n  font-family: inherit;\n  font-size: inherit;\n}\n\n.editing {\n    -webkit-user-select: text;\n    box-shadow: rgba(0, 0, 0, .5) 3px 3px 4px;\n    outline: 1px solid rgb(66%, 66%, 66%) !important;\n    background-color: white;\n    -webkit-user-modify: read-write-plaintext-only;\n    text-overflow: clip !important;\n    padding-left: 2px;\n    margin-left: -2px;\n    padding-right: 2px;\n    margin-right: -2px;\n    margin-bottom: -1px;\n    padding-bottom: 1px;\n    opacity: 1.0 !important;\n}\n\n.editing,\n.editing * {\n    color: #222 !important;\n    text-decoration: none !important;\n}\n\n.editing br {\n    display: none;\n}\n\n.elements-gutter-decoration {\n    position: absolute;\n    left: 1px;\n    margin-top: 2px;\n    height: 8px;\n    width: 8px;\n    border-radius: 4px;\n    border: 1px solid orange;\n    background-color: orange;\n}\n\n.elements-gutter-decoration.elements-has-decorated-children {\n    opacity: 0.5;\n}\n\n.add-attribute {\n    margin-left: 1px;\n    margin-right: 1px;\n    white-space: nowrap;\n}\n\n.elements-tree-element-pick-node-1 {\n    border-radius: 3px;\n    padding: 1px 0 1px 0;\n    -webkit-animation: elements-tree-element-pick-node-animation-1 0.5s 1;\n}\n\n.elements-tree-element-pick-node-2 {\n    border-radius: 3px;\n    padding: 1px 0 1px 0;\n    -webkit-animation: elements-tree-element-pick-node-animation-2 0.5s 1;\n}\n\n@-webkit-keyframes elements-tree-element-pick-node-animation-1 {\n    from { background-color: rgb(255, 210, 126); }\n    to { background-color: inherit; }\n}\n\n@-webkit-keyframes elements-tree-element-pick-node-animation-2 {\n    from { background-color: rgb(255, 210, 126); }\n    to { background-color: inherit; }\n}\n\n.pick-node-mode {\n    cursor: pointer;\n}\n\n.webkit-html-attribute-value a {\n    cursor: default !important;\n}\n\n.elements-tree-nowrap, .elements-tree-nowrap .li {\n    white-space: pre !important;\n}\n\n.outline-disclosure .elements-tree-nowrap li {\n    word-wrap: normal;\n}\n\n/* DOM update highlight */\n@-webkit-keyframes dom-update-highlight-animation {\n    from {\n        background-color: rgb(158, 54, 153);\n        color: white;\n    }\n    80% {\n        background-color: rgb(245, 219, 244);\n        color: inherit;\n    }\n    to {\n        background-color: inherit;\n    }\n}\n\n.dom-update-highlight {\n    -webkit-animation: dom-update-highlight-animation 1.4s 1 cubic-bezier(0, 0, 0.2, 1);\n    border-radius: 2px;\n}\n\n.outline-disclosure.single-node li {\n    padding-left: 2px;\n}\n\n\nli.parent.shadow-root {\n    /* display: none; */\n}\n\n.shadow-host-display-mode-toolbar .shadow-host-display-mode-toolbar-button {\n    border: 0;\n    margin: 0;\n    background-color: inherit;\n    height: 13px;\n    opacity: 0.2;\n}\n\n.shadow-host-display-mode-toolbar .shadow-host-display-mode-toolbar-button.toggled {\n    opacity: 0.7;\n}\n\n.shadow-host-display-mode-toolbar:hover .shadow-host-display-mode-toolbar-button {\n    opacity: 1;\n}\n\n.shadow-host-display-mode-toolbar-button.toggled {\n    color: rgb(66, 129, 235);\n}\n\n.shadow-host-display-mode-toolbar .shadow-host-display-mode-toolbar-button.toggled.custom-mode {\n    opacity: 1;\n}\n\n/*# sourceURL=elements/elementsTreeOutline.css */";Runtime.cachedResources["elements/spectrum.css"]="/* https://github.com/bgrins/spectrum */\n:host {\n    width: 205px;\n    height: 220px;\n    -webkit-user-select: none;\n}\n\n.spectrum-color {\n    position: absolute;\n    top: 5px;\n    left: 5px;\n    width: 158px;\n    height: 158px;\n    outline: 1px solid #bbb;\n}\n\n.spectrum-display-value {\n    -webkit-user-select: text;\n    display: inline-block;\n    padding-left: 2px;\n}\n\n.spectrum-hue {\n    position: absolute;\n    top: 5px;\n    right: 5px;\n    width: 28px;\n    height: 158px;\n    -webkit-box-reflect: right -28px;\n}\n\n.spectrum-range-container {\n    position: absolute;\n    bottom: 28px;\n    left: 5px;\n    display: flex;\n    align-items: center;\n}\n\n.spectrum-text {\n    position: absolute;\n    bottom: 5px;\n    left: 5px;\n    display: flex;\n    align-items: center;\n}\n\n.spectrum-range-container * {\n    font-size: 11px;\n    vertical-align: middle;\n}\n\n.spectrum-range-container label {\n    display: inline-block;\n    padding-right: 4px;\n}\n\n.spectrum-dragger,\n.spectrum-slider {\n    -webkit-user-select: none;\n}\n\n.spectrum-sat {\n    background-image: linear-gradient(to right, white, rgba(204, 154, 129, 0));\n}\n\n.spectrum-val {\n    background-image: linear-gradient(to top, black, rgba(204, 154, 129, 0));\n}\n\n.spectrum-hue {\n    background: linear-gradient(to top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);\n}\n\n.spectrum-dragger {\n    border-radius: 5px;\n    height: 5px;\n    width: 5px;\n    border: 1px solid white;\n    cursor: pointer;\n    position: absolute;\n    top: 0;\n    left: 0;\n    background: black;\n}\n\n.spectrum-slider {\n    position: absolute;\n    top: 0;\n    cursor: pointer;\n    border: 1px solid black;\n    height: 4px;\n    left: -1px;\n    right: -1px;\n}\n\n.swatch {\n    width: 20px;\n    height:20px;\n    margin: 0;\n}\n\n.swatch-inner {\n    width: 100%;\n    height: 100%;\n    display: inline-block;\n    border: 1px solid rgba(128, 128, 128, 0.6);\n}\n\n.swatch-inner:hover {\n    border: 1px solid rgba(64, 64, 64, 0.8);\n}\n\n/*# sourceURL=elements/spectrum.css */";